代码拉取完成,页面将自动刷新
同步操作将从 烟波里成灰,也去的完美/layui多条件嵌套逻辑查询 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<title>dynamicCondition 管理</title>
<link href="static/jquery-ui/jquery-ui.min.css" media="all" rel="stylesheet">
<link href="static/layui/css/layui.css" media="all" rel="stylesheet">
<link href="static/my/my.css" media="all" rel="stylesheet">
<script src="static/layui/layui.js"></script>
<script src="static/baidu/baiduTemplate.js"></script>
<script src="static/my/my.js"></script>
<script>
var appName = "xpl";
</script>
<style>
</style>
</head>
<body >
<div id="errMsg">请清空下缓存后,刷新下页面。由于缓存js可能导致页面错误。</div>
<div id="noTableDiv">
<div id="msg" style="margin-top:10px;margin-left:10px;"></div>
<ul id="dynamicCondition" style="display:none;">
<li field="DynamicCondition.name" title="姓名" ops="equal,like,end" datatype="string" edit="text" placeholder="请输入姓名" layVerify=""></li>
<li field="DynamicCondition.logicDel" title="是否有效" ops="equal" edit="editorRadio" layVerify=""></li>
<li field="DynamicCondition.sex" title="性别" edit="select" layVerify="number" templet="#dict-sex"></li>
<li field="DynamicCondition.birthday" title="生日" edit="date" layVerify=""></li>
<li field="birthday" title="生日1" ops="between" edit="date" layVerify=""></li>
<li field="DynamicCondition.phone" title="手机号码" edit="text" layVerify=""></li>
<li field="DynamicCondition.email" title="邮箱" edit="text" layVerify=""></li>
<li field="DynamicCondition.id" title="id" edit="text" datatype="int" layVerify="number" ></li>
<li field="DynamicCondition.province" title="省份" datatype="string" ops="equal" edit="selectProvince" templet="#dict-province" layVerify="" allowDel="false"></li>
<li field="DynamicCondition.city" title="城市" ops="equal" edit="selectCity" templet="#dict-city" layVerify="" allowDel="false"></li>
<li field="DynamicCondition.goodsClassifyId" title="商品分类" ops="equal" edit="treeSelect" layVerify=""
url="/xpl/demo/dynamicCondition/treeSelect" placeholder="请选择商品分类" ></li>
</ul>
<script type="text/html" id="toolbarBts">
<div>
<a class="layui-btn layui-btn-xs" onclick="dynamicConditionSave()">新增</a>
<a class="layui-btn layui-btn-xs" onclick="dynamicConditionQuery()" >查询</a>
<a class="layui-btn layui-btn-xs" onclick="qh()">切换为弹窗/非弹窗模式</a>
<a class="layui-btn layui-btn-xs" href="/xpl/demo/dynamicCondition/index2">切换为simple模式</a>
<a class="layui-btn layui-btn-xs" href="/static/layui-extend/dynamicCondition/demo/index.htm">返回静态页面</a>
</div>
</script>
<table class="layui-hide" id="listTable" lay-filter="listMainTable"></table>
<script type="text/javascript">
layui.config({
base: 'static/layui-extend/' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展
}).extend({
dynamicCondition: 'dynamicCondition/dynamicCondition',
treeSelect: 'treeSelect/treeSelect'
}).use(['table','form','dynamicCondition','treeSelect'], function(){
initLayuiParam(layui);
var editorProvince = dynamicCondition.createEditor("selectProvince");
$.extend( editorProvince ,{
createElement:function(item){
var selectHtml;
if($(item.templet).is("select")){
selectHtml = $(item.templet).prop("outerHTML");
}else{
selectHtml = $(item.templet).html();
}
return $(selectHtml);
}
,getRequestText:function(ele){
return ele.find("option:selected").text();
}
})
var editorCity = dynamicCondition.createEditor("selectCity");
$.extend( editorCity ,{
createElement:function(item){
var selJq = $("<select>");
selJq.append("<option value=''></option>");
return selJq;
}
,getRequestText:function(ele){
return ele.find("option:selected").text();
}
})
//单选查询条件
var editorRadio = dynamicCondition.createEditor("editorRadio");
$.extend( editorRadio ,{
createElement:function(item){
var randomId= (Math.random()+"").substr(2);
var ele = $("<div style='text-align: center;'>");
ele.append('<input type="radio" name="rd'+randomId+'" value="N" title="是"/>');
ele.append('<input type="radio" name="rd'+randomId+'" value="Y" title="否" />');
return ele;
}
,fillElement:function(ele, val){
$(ele).find('input[value="'+val.value+'"]').prop('checked', true);
}
,getRequestValue:function(ele){
return ele.find("input:checked").val();
}
,getRequestText:function(ele){
return ele.find("input:checked").attr("title");
}
})
var dc = dynamicCondition.create({
//通过容器选择器传入,也可以$("#dynamicCondition"),或者document.getElementById("dynamicCondition")
elem:"#dynamicCondition"
,tableId:"listTableId"
,conditionTextId:"#msg"
,extendBtns:function(btnDivJq, instance){ //扩展添加按钮
btnDivJq.append($('<a class="layui-btn " onclick="dynamicConditionSave()" style="display:none;">新增</a>'));
btnDivJq.append($('<a class="layui-btn " onclick="qh()">'+
(instance.config.displayModel == "unpopup" ? "弹窗" : "非弹窗")
+'模式</a>'));
btnDivJq.append($('<a class="layui-btn " href="/xpl/demo/dynamicCondition/index2">'+
(instance.config.type == "complex" ? "简单" : "复杂")
+'模式</a>'));
btnDivJq.append($('<a class="layui-btn " href="/static/layui-extend/dynamicCondition/demo/index.htm">静态demo</a>'));
}
// ,popupMsgText: "查询条件:"
,popupMsgText: ""
,popupBtnsWidth: 700
,popupShowQueryBtn: true
,unpopupBtnswidth: 620
,unpopupShowAddBtn: true
,displayModel:"popup"
,nestedQuery:true
,opsList:["equal","like","between","start","end","unequal","empty","greater_than","less_than"]
,afterOpen:function(_dc){
//下拉框联动
form.on('select(province)', function(data){
var params={province:data.value};
$.post("/xpl/demo/dynamicCondition/getCityList",params,function(data){
if(data.code == 0){
var eleJq = _dc.getRowDivs("DynamicCondition.city")[0].eleJq;
eleJq.html("<option value=''></option>");
$.each(data.otherData.cityList, function(key, val) {
var option1 = $("<option>").val(val.value).text(val.label);
eleJq.append(option1);
});
form.render('select');
//$("#dictType").get(0).selectedIndex=0;
}
});
})
//如果省份有值,则需要初始化城市下拉框
var provinceVal = _dc.getVal("DynamicCondition.province");
if(provinceVal){
var params={province:provinceVal};
$.post("/xpl/demo/dynamicCondition/getCityList",params,function(data){
if(data.code == 0){
var eleJq = _dc.getRowDivs("DynamicCondition.city")[0].eleJq;
eleJq.html("<option value=''></option>");
$.each(data.otherData.cityList, function(key, val) {
var option1 = $("<option>").val(val.value).text(val.label);
eleJq.append(option1);
});
eleJq.val(eleJq.attr("oldVal"));
form.render('select');
//$("#dictType").get(0).selectedIndex=0;
}
});
}
}
});
dc.setCondition([["DynamicCondition.name","like","张三"]
]);
//监听工具条
table.on('tool(listMainTable)', function(obj){
var data = obj.data;
if(obj.event === 'logicDel'){
deleteModel("#frm", "/xpl/demo/dynamicCondition/logicDel", data);
} else if(obj.event === 'edit'){
var data = {obj:data}
addOrEdit("edit","/xpl/demo/dynamicCondition/update",data);
form.render();
goodsClassifySelect("edit-goodsClassifyTree", data.obj.goodsClassifyId);
selectProvince();
}
});
form.on('switch(logicDel)', function(obj){
logicDelSwitch("/xpl/demo/dynamicCondition/logicDel",'listTableId',obj)
});
var tableDivHeight = 'full-'+ ($("#noTableDiv").height()+ 10);
table.render({
elem: '#listTable'
,url:'/xpl/demo/dynamicCondition/list'
,method:"post"
,where: dynamicCondition.getInstance().buildRequestData()
,sortType:'server'
,height: tableDivHeight
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
//,toolbar: '#toolbarBts'
,cols: [[
{field:'layui_seq', title: '序号',width:80,align:'center' }
,{field:'id', title: 'id',sort:true}
,{field:'name', title: '姓名',sort:true}
,{field:'sex', title: '性别',sort:true,templet: '<div>{{ getDictLabel("dict-sex", d.sex) }}</div>'}
,{field:'birthday', title: '生日',sort:true}
,{field:'phone', title: '手机号码',sort:true}
,{field:'email', title: '邮箱',sort:true}
,{field:'province', title: '省份',sort:true}
,{field:'city', title: '城市',sort:true}
,{field:'goodsClassifyName', title: '商品分类',sort:true}
,{field:'logicDel', title: '有效',width:80,templet: '#logicDelTpl',sort:true}
,{fixed: 'right', width:178, align:'center', toolbar: '#barBtns',title: '操作'} //单元格内容水平居中
]]
,id: 'listTableId'
,page: true
,limit:20
});
table.on('sort(listMainTable)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
tableReloadForSort($,"#frm",table,null,obj);
});
$("#errMsg").hide();
});
/***
* 查询
*/
function dynamicConditionQuery(){
alert(1111);
dynamicCondition.getInstance().open();
}
/***
* 新增记录
*/
function dynamicConditionSave(){
var data = {obj:{}}
addOrEdit("add","/xpl/demo/dynamicCondition/save",data);
form.render();
goodsClassifySelect("edit-goodsClassifyTree", null);
selectProvince();
}
/***
* 新增或编辑记录 省份/城市下拉框级联绑定
*/
function selectProvince(){
//下拉框联动
form.on('select(edit-province)', function(data){
var params={province:data.value};
$.post("/xpl/demo/dynamicCondition/getCityList",params,function(data){
if(data.code == 0){
var eleJq = $("#frmEdit select[name='city']");
eleJq.html("<option value=''></option>");
$.each(data.otherData.cityList, function(key, val) {
var option1 = $("<option>").val(val.value).text(val.label);
eleJq.append(option1);
});
form.render('select');
//$("#dictType").get(0).selectedIndex=0;
}
});
})
//如果省份有值,则需要初始化城市下拉框
var provinceVal = $("#frmEdit select[name='province']").val();
if(provinceVal){
var params={province:provinceVal};
$.post("/xpl/demo/dynamicCondition/getCityList",params,function(data){
if(data.code == 0){
var eleJq = $("#frmEdit select[name='city']");
eleJq.html("<option value=''></option>");
$.each(data.otherData.cityList, function(key, val) {
var option1 = $("<option>").val(val.value).text(val.label);
eleJq.append(option1);
});
eleJq.val(eleJq.attr("oldVal"));
form.render('select');
//$("#dictType").get(0).selectedIndex=0;
}
});
}
}
function qh(){
if("popup" == dynamicCondition.getInstance().config.displayModel){
dynamicCondition.getInstance().setDisplayModel("unpopup");
}else{
dynamicCondition.getInstance().setDisplayModel("popup");
}
}
</script>
<script id='add_or_edit_form' type="text/html">
<form id="frmEdit" class="layui-form" lay-filter="frm" >
<div class="layui-form-item layui-inline">
<label class="layui-form-label" >id</label>
<div class="layui-input-inline edit-form-input">
<input type="text" name="id" lay-verify=""
placeholder="" autocomplete="off" class="layui-input db-primaryKey db-autoIncrement " value="<%= obj.id == null? "": obj.id%>">
</div>
</div>
<br/>
<div class="layui-form-item layui-inline">
<label class="layui-form-label" >省份</label>
<div class="layui-input-inline edit-form-input">
<select name='province' lay-filter='edit-province'>
<option value=""></option>
<option value="浙江省">浙江省</option>
<option value="广东省">广东省</option>
</select>
</div>
</div>
<br/>
<div class="layui-form-item layui-inline">
<label class="layui-form-label" >城市</label>
<div class="layui-input-inline edit-form-input">
<select name="city" oldVal="<%= obj.city == null? "": obj.city%>"><option></option></select>
</div>
</div>
<br/>
<div class="layui-form-item layui-inline">
<label class="layui-form-label" >商品分类</label>
<div class="layui-input-inline edit-form-input">
<input type="hidden" name="goodsClassifyId" lay-verify=""
placeholder="" autocomplete="off" class="layui-input " value="<%= obj.goodsClassifyId == null? "": obj.goodsClassifyId%>">
<input type="text" id="edit-goodsClassifyTree" lay-filter="edit-goodsClassifyTree" class="layui-input">
</div>
</div>
<br/>
<div class="layui-form-item layui-inline">
<label class="layui-form-label" >姓名</label>
<div class="layui-input-inline edit-form-input">
<input type="text" name="name" lay-verify=""
placeholder="" autocomplete="off" class="layui-input " value="<%= obj.name == null? "": obj.name%>">
</div>
</div>
<br/>
<div class="layui-form-item layui-inline">
<label class="layui-form-label" >性别</label>
<div class="layui-input-inline edit-form-input">
<select name='sex' lay-verify='' lay-search=''>
<option value=""></option>
<option value="1">男</option>
<option value="0">女</option>
</select>
</div>
</div>
<br/>
<div class="layui-form-item layui-inline">
<label class="layui-form-label" >生日</label>
<div class="layui-input-inline edit-form-input">
<input type="text" name="birthday" lay-verify=""
placeholder="" autocomplete="off" class="layui-input " value="<%= obj.birthday == null? "": obj.birthday%>">
</div>
</div>
<br/>
<div class="layui-form-item layui-inline">
<label class="layui-form-label" >手机号码</label>
<div class="layui-input-inline edit-form-input">
<input type="text" name="phone" lay-verify=""
placeholder="" autocomplete="off" class="layui-input " value="<%= obj.phone == null? "": obj.phone%>">
</div>
</div>
<br/>
<div class="layui-form-item layui-inline">
<label class="layui-form-label" >邮箱</label>
<div class="layui-input-inline edit-form-input">
<input type="text" name="email" lay-verify=""
placeholder="" autocomplete="off" class="layui-input " value="<%= obj.email == null? "": obj.email%>">
</div>
</div>
<br/>
<div class="layui-form-item" style="display:none;">
<div class="layui-input-block">
<button id="editPageBtnId" class="layui-btn" lay-submit="" lay-filter="edit-lay-filter">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div></form>
</script>
<script type="text/html" id="barBtns">
<a class="layui-btn layui-btn-xs" lay-event="edit" style="display:none;">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="logicDel" style="display:none;">删除</a>
</script>
<div style="display:none;">
<select id='dict-sex' name='sex' lay-verify='' lay-search=''>
<option value=""></option>
<option value="1">男</option>
<option value="0">女</option>
</select>
<select id='dict-province' lay-filter='province'>
<option value=""></option>
<option value="浙江省">浙江省</option>
<option value="广东省">广东省</option>
</select>
</div>
<!-- 定义是否有效的开关 -->
<script id="logicDelTpl" type="text/html">
<!-- 这里的 checked 的状态是-->
<input type="checkbox" name = "logicDel" value = {{d.logicDel}} lay-skin="switch" lay-filter="logicDel" lay-text="是|否" {{ d.logicDel == 'N' ? 'checked' : '' }}>
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。