layui使用某些注意点
1.搜索注意
1.1存在多个搜索同一个table的时候因为搜索条件的不同table执行relode的方法时,之前搜索的参数如果不清除,而下一个搜索面板没有此参数时,搜索参数会携带上一次的条件
解决方案:
.注意搜索时清空搜索条件且,要重置页数
this.where = {};
form.on('submit(btn_Search)', function (data) { this.where = {}; searchType = 1; var field = data.field; //去除前后的空格 $.each(field, function (i) { field[i] = $.trim(field[i]); }); ////执行重载 table.reload('tableList', { where: field , page: { curr: 1 //重新从第 1 页开始 } }); return false; });
2.监听toolbar
toolbar使用方法
toolbar写法
//监听toolbar table.on('toolbar(tableList)', function (obj) { switch (obj.event) { case 'importCase': //操作方法 break; }; });
3.table单击双击事件
//监听行单击事件(双击事件为:rowDouble,单击row)
table.on('rowDouble(tableList)', function (obj) { var data = obj.data; //标注选中样式
//obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click'); });
4.表单提交(搜索或保存)
//监听搜索 form.on('submit(btn_Search)', function (data) { searchType = 1; var field = data.field; //去除前后的空格 $.each(field, function (i) { field[i] = $.trim(field[i]); }); ////执行重载 table.reload('tableList', { where: field , page: { curr: 1 //重新从第 1 页开始 } }); return false; });
5.时间选择器在谷歌空间过小时闪退问题
laydate.render({ elem: '#EntrustedCaseDate' //指定元素,format: 'yyyy年MM月dd日' , trigger: 'click' //解决谷歌空间小闪退问题 , done: function (value, date) { } });
6.checkbox 多选编辑问题
<div class="layui-input-block"> <input id="A" type="checkbox" lay-skin="primary" name="CustomerGroupCode" value="A" title="A"> <input id="B" type="checkbox" lay-skin="primary" name="CustomerGroupCode" value="B" title="B"> <input id="C" type="checkbox" lay-skin="primary" name="CustomerGroupCode" value="C" title="C"> <input id="D" type="checkbox" lay-skin="primary" name="CustomerGroupCode" value="D" title="D"> <input id="E" type="checkbox" lay-skin="primary" name="CustomerGroupCode" value="E" title="E"> <input id="F" type="checkbox" lay-skin="primary" name="CustomerGroupCode" value="F" title="F"> </div>
var CustomerGroupCode = data.CustomerGroupCodes.split(","); for (var i = 0; i < CustomerGroupCode.length; i++) { $("input[name='CustomerGroupCode'][value='" + CustomerGroupCode[i] + "']").attr("checked", true); }
form.render();//注意最后要进行渲染
7.table渲染本地数据时只显示10条问题
table.reload('tableList', { data: data, limit: data.length//设置其数量 , done: function (res, curr, count) { layer.close(ii); } });