layui 穿梭框

其他 2019-03-26 22:01:34 阅读次数: 0

 对应的后台代码，有的可能是不通的，不填了。  注意点，用到了好多的查询控制。主要思路就是，选择左框数据，按下按钮，存到数据库，然后左右表重载渲染。 选择右框数据，按下按钮，删除数据库中的数据，左右表重载渲染。

渲染的时候，注意左边的要排除掉右边的数据。采用sql语句。  注意使用隐藏按钮。采用js，调用layui的渲染。


    	
    	
selectDislodgeData
===
* 找到移除后的数据。	 

select  
    @pageTag(){
    *
    @}
     from house_info where  #use("condition5")#
 
condition5
===
    1=1
    and company_code=#companyCode# 
    @if(!isEmpty(houseAddresParam) && houseAddresParam != "" ){
    and  house_address  like #'%'+houseAddresParam+'%'#
    @}
    and   not  EXISTS (select house_id_area from area_info where area_info.house_id_area = house_info.house_id)  	
    	
    	
selectHouseTable
===
* 根据账户code找出房屋地址数据及片区数据  and  aaio.create_code_area =##   
select 
    @pageTag(){
    hebdcn.house_id,hebdcn.house_address,aaio.* 
    @}
    from area_info aaio LEFT JOIN  house_build_combination  hebdcn on aaio.house_id_area = hebdcn.house_id  where  #use("condition3")#
    
    
    
condition3
===
    
    1 = 1  
       and	aaio.create_code_area=#companyCode#
   	@if(!isEmpty(houseAddresParam) && houseAddresParam != "" ){
   	    and  hebdcn.house_address  like #'%'+houseAddresParam+'%'#
   	@} 
    
selectGroupHouseIdSets
===
* 把area表中的houseId给全部找出来。     
 	
select GROUP_CONCAT(aabc.house_id_area) gpct   from (select DISTINCT house_id_area from  area_info ) aabc



deleteDatasByTwoParams
===
* 根据两个参数删除对应的数据

delete from area_info where 1=1 and  create_code_area = #createCodeParam#  AND house_id_area=#houseIdParam#


selectAreaNames
===
* 得到所有的片区名称

select 
    @pageTag(){
    DISTINCT aaio.name_area 
    @}
    from area_info aaio where  #use("condition8")#

condition8
===
     1 = 1  
           and	aaio.create_code_area=#companyCode#
       	@if(!isEmpty(nameArea) && nameArea != "" ){
       	    and  aaio.name_area  like #'%'+nameArea+'%'#
       	@} 
       	
       	
       	
selectCountDist
===
* 搜索去重后的符合条件的总数据

select  count(1)  from  (select  DISTINCT  name_area from area_info where   #use("condition11")#
 
condition11
===
    1=1  and	create_code_area=#companyCode#
       	@if(!isEmpty(nameArea) && nameArea != "" ){
           	    and  name_area  like #'%'+nameArea+'%'#
           	@} 
    ) a           	
           	
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>area片区</title>
    <link rel="stylesheet" href="/js/lib/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/js/lib/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">  <!--layui-card可以当成底板-->
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item" >
                <div class="layui-inline">
                    <label class="layui-form-label">片区名称</label>
                    <div class="layui-input-inline">
                        <input id="nameAreaId" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" data-type="reload" id="serchIdA"><i
                            class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                    </button>
                </div>
            </div>

            <script type="text/html" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="AddBind">增加数据</button>
                </div>
            </script>

            <table class="layui-hide" id="areaTabId" lay-filter="areaTab"></table>

            <fieldset class="layui-elem-field site-demo-button" style="display: none;">
                <legend>按钮主题</legend>
                <div>
                    <button class="layui-btn layui-btn-primary" id="tianjia">原始按钮</button>
                </div>
            </fieldset>
        </div>
    </div>
</div>

<script src="/js/lib/layuiadmin/layui/layui.js" charset="utf-8"></script>
<script src="/js/lib/app-tools.js"></script>
<script src="/js/app/area.js" charset="UTF-8"></script>
</body>
</html>
layui.use(['table', 'jquery', 'autocomplete'], function () {
    var table = layui.table, $ = layui.$, laytpl = layui.laytpl, form = layui.form, autocomplete = layui.autocomplete;

  /*  $('#tianjia').click(function () {
        layer.open({
            type: 2,
            title: '增加',
            shadeClose: true,
            shade: false,
            maxmin: true,
            area: ['80%', '80%'],
            content: '//'
        });
    });*/


    table.render({
        elem: '#areaTabId',
        url: '//',
        method: 'POST',
        toolbar: '#toolbar',
        where: {
            companyCode: tools.getOrg()[0].orgCode
        },
        contentType: 'application/json',
        request: {
            pageName: 'pageNumber', //页码的参数名称，默认：page
            limitName: 'pageSize' //每页数据量的参数名，默认：limit
        },
        cols: [[
            // {type:'checkbox'},
            {field: '', title: '', align: 'center'},
        ]],
        id: '',
        height: 'full-200',
        limits: [10, 20, 30],
        page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            , groups: 1 //只显示 1 个连续页码
            , first: false //不显示首页
            , last: false //不显示尾页

        }
    });


    //表格的重载1
    $('#serchIdA').on('click', function () {
        table.reload('areaNameTabReload', {
            where: {
                companyCode: tools.getOrg()[0].orgCode,
                nameArea: $('#').val(),
                pageNumber: 1
            }
        });
    });

    //头部工具栏事件
    table.on('toolbar(areaTab)', function (obj) {
        switch (obj.event) {
            case 'AddBind':
                promt.area1();
                break;
        }
        ;
    });


    //prompt层
    var  promt={
        area1:function () {
            layer.prompt({title: ‘哈哈哈’, formType: 0}, function (value,index,elem) {
             //   alert(value);
                layer.open({
                    type: 2,
                    title: '增加',
                    shadeClose: true,
                    shade: false,
                    maxmin: true,
                    area: ['80%', '80%'],
                    content: '//?areaName='+value
                });

                layer.close(index);
            });

        }



    }





});
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>jquery之双下拉框</title>
    <link rel="stylesheet" href="/css/test/testBoot.css">
    <link rel="stylesheet" href="/js/lib/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/js/lib/layuiadmin/style/admin.css" media="all">


</head>
<body>
<div class="doubleBox" style="margin-top: 10px;">
    <div class="layui-container">  <!--style="border:1px solid red;"-->
        <div class="layui-form-item" align="center">
            <div class="layui-inline" style="margin-left: -10em;">
                <label class="layui-form-label"><b>片区名称</b></label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" id="nameAreaParam" th:value="${AreaNameS}" style="width: 25em;"/>
                </div>
            </div>
        </div>
            <div class="layui-row" > <!--style="border: 1px solid greenyellow"-->
                <div class="layui-col-xs5"  style="border:2px solid rgba(89,83,27,0.69);"><!---->
                    <div class="grid-demo grid-demo-bg1">
                        <div class="leftBox">
                            <form>
                                <input type="text" class="leftInput doubleInput " id="leftInput" placeholder="模糊查询"
                                       style="height: 2.5em;width: 99%;"/> <br/>
                                <a class="search layui-btn" id="searchBtn" style="display: none;">hahaha</a>
                                <br/>
                                <!--     <input type="text" id="checkedChoose">-->
                            </form>
                            <table class="layui-hide" id="leftId" lay-filter="left"></table>
                        </div>

                    </div>
                </div>
                <div class="layui-col-xs2" > <!--style="border:1px solid #7aa1ff; "-->
                    <div class="grid-demo grid-demo-bg1">
                        <div align="center">
                            <div class="btn" style="padding-top: 150%;">
                                <!--style="margin-top: 16em;margin-left: 4em;"-->
                                <button class="btn_add layui-btn" id="rightMove">右移
                                    >>
                                </button>
                                <br/>
                                <button class="btn_delete layui-btn" id="leftMove"><<
                                    左移
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs5"  style="border:2px solid rgba(89,83,27,0.69);">  <!---->
                    <div class="grid-demo">
                        <div class="rightBox">
                            <input type="text" class="rightInput doubleInput" placeholder="模糊查询" id="rightInppt"
                                   style="height: 2.5em;width: 99%;"/> <br/><br/>
                            <div th:replace="area3::html"></div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

    <script src="/js/lib/layuiadmin/layui/layui.js" charset="utf-8"></script>
    <script src="/js/lib/app-tools.js"></script>
    <script src="/js/lib/jquery-3.0.0.min.js"></script>
    <script src="/js/app/area2.js"></script>
    <script src="/js/app/area3.js"></script>
</body>

</html>

layui.use(['table', 'jquery'], function () {
    var table = layui.table, $ = layui.$;
    var datas=new Array();

    table.render({
        elem: '#',
        url:'//',
        method:'POST',
        where:{
            companyCode: tools.getOrg()[0].orgCode
        },
        contentType:'application/json',
        request: {
            pageName: 'pageNumber', //页码的参数名称，默认：page
            limitName: 'pageSize' //每页数据量的参数名，默认：limit
        },
        cols: [[
            {type:'checkbox'},
            {field:'houseAddress', title: '房屋地址',align:'left'},
        ]],
        id:'areaReload',
        height:'full-180',
        limits:[10,20,30],
        page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            ,groups: 1 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页

        }
    });

    /**
     * 监听左侧的输入框，用于调用重载
     */
    $('#leftInput').keyup(function () {
        //保证输入的时候，数组不会影响到后台。
      //  datas=null;
        $('#searchBtn').click();
    });


    //表格的重载1
    $('#searchBtn').on('click', function () {
        table.reload('areaReload', {
            where: {
                companyCode: tools.getOrg()[0].orgCode,
                houseAddresParam:$('#leftInput').val(),
                pageNumber:1,
                houseIdArrayParam:datas
            }
        });
    });




//监听复选框
    table.on('checkbox(left)', function(obj){
        datas=[];
        if (obj.type=="allw"){}else{
            var data3=table.cache.areaReload;
            for (var i=0;i<data3.length;i++){
            if (data3[i].LAY_CHECKED==true){
                datas.push(data3[i].houseId);
            }
            }
        }
    });

    $("#rightMove").click(function () {

        if(datas.length==0){
            layer.msg("请至少选择一个");
            return false;
        }else {
            //走一个ajax
            var addDatas={
                houseIdArrayParam:datas,
                companyCode: tools.getOrg()[0].orgCode,
                nameArea:$('#nameAreaParam').val()
            };
            $.ajax({
                data:JSON.stringify(addDatas),
                type:'post',
                dataType:'json',
                contentType:'application/json',
                url:'//',
                beforeSend:function () {
                },
                complete:function () {
                },
                success:function (e) {
                    if(e > 0){
                        layer.msg('执行操作成功');
                    } else{
                        layer.msg('执行操作失败');
                    }
                    setTimeout(function () {
                        $('#searchBtn').click();
                        $('#searchBtnRight').click();
                    },100)
                    datas=[];
                }
            });

        }
    });


});
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<a class="search layui-btn" id="searchBtnRight" style="display: none;">hahaha</a>
<table class="layui-hide" id="rightId" lay-filter="right"></table>
</body>

</html>

layui.use(['table', 'jquery'], function () {
    var table = layui.table, $ = layui.$;
    var rightDatas=new Array();

    table.render({
        elem: '#rightId',
        url:'//',
        method:'POST',
        where:{
            companyCode: tools.getOrg()[0].orgCode
        },
        contentType:'application/json',
        request: {
            pageName: 'pageNumber', //页码的参数名称，默认：page
            limitName: 'pageSize' //每页数据量的参数名，默认：limit
        },
        cols: [[
            {type:'checkbox'},
            {field:'', title: '',align:'left'},//联合查询
        ]],
        id:'rightReload',
        height:'full-180',
        limits:[10,20,30],
        page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            ,groups: 1 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页

        }
    });

    //输入框输入的数据，用于调用重载
    $('#rightInppt').keyup(function () {
        //保证输入的时候，数组不会影响到后台。
        //rightDatas=null;
        $('#searchBtnRight').click();
    });

    //表格的重载1
    $('#searchBtnRight').on('click', function () {
        table.reload('rightReload', {
            where: {
                companyCode: tools.getOrg()[0].orgCode,
                houseAddresParam:$('#rightInppt').val(),
                pageNumber:1,
                houseIdArrayParam:rightDatas
            }
        });
    });


    /**
     * 监听右边的多选框
     */
    table.on('checkbox(right)', function(obj){
        rightDatas=[];
        if (obj.type=="allw"){}else{
            var rightdata3=table.cache.rightReload;
            for (var i=0;i<rightdata3.length;i++){
                if (rightdata3[i].LAY_CHECKED==true){
                    rightDatas.push(rightdata3[i].houseId);
                }
            }
        }
    });


    /**
     * 监听左移按钮
     */
    $('#leftMove').click(function () {
    if (rightDatas.length == 0 ){
        layer.msg("请至");
        return  false;
    } else{
        var deleteDatas={
            houseIdArrayParam:rightDatas,
            companyCode: tools.getOrg()[0].orgCode
        };
        $.ajax({
            data:JSON.stringify(deleteDatas),
            type:'post',
            dataType:'json',
            contentType:'application/json',
            url:'//',
            beforeSend:function () {
            },
            complete:function () {

            },
            success:function (e) {
                if(e > 0){
                    layer.msg('执行操作成功');
                } else{
                    layer.msg('执行操作失败');
                }
                setTimeout(function () {
                    $('#searchBtn').click();
                    $('#searchBtnRight').click();
                },100)
                rightDatas=[];
            }
        });
    }
});


});

猜你喜欢

转载自blog.csdn.net/weixin_38728273/article/details/88060189
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022