对应的后台代码,有的可能是不通的,不填了。 注意点,用到了好多的查询控制。主要思路就是,选择左框数据,按下按钮,存到数据库,然后左右表重载渲染。 选择右框数据,按下按钮,删除数据库中的数据,左右表重载渲染。
渲染的时候,注意左边的要排除掉右边的数据。采用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=[];
}
});
}
});
});