记录下最近工作中遇到一些容易忘记的知识点
想要layui的表格可编辑,只需要在cols中加入edit即可:
tableIns = table.render({
elem: '#buildInputTable',
data: arr,
page: false,
limit: Number.MAX_VALUE,
height: 300,
id: 'buildInputTable',
cols: [
[{
field: 'inputParamName',
title: '参数名称',
align: 'center',
edit: 'text'
},
{
field: 'inputParamNameCn',
title: '中文名称',
align: 'center',
edit: 'text'
},
{
title: '是否必选',
align: 'center',
templet: '#inputSel'
},
{
title: '类型范围',
align: 'center',
templet: '#inputType'
},
{
field: 'remarks',
title: '备注说明',
align: 'center',
edit: 'text'
},
{
title: '删除',
toolbar: '#inputBuildeDel',
align: 'center'
}
]
],
})
插入select下拉框:
select模板
<script type="text/html" id="inputType">
<select name="inputParamType" lay-filter="inputParamType">
<option value="Int">Int</option>
<option value="String">String</option>
<option value="Long">Long</option>
<option value="Number">Number</option>
<option value="Double">Double</option>
<option value="Date">Date</option>
<option value="Boolean">Boolean</option>
<option value="Char">Char</option>
<option value="Blob">Blob</option>
<option value="Clob">Clob</option>
</select>
</script>
在cols使用 templet: '#inputType(模板的id)'
,再调整样式即可。
监听单元格的编辑:
table.on('edit(buildInputTable)', function(obj){
var value = obj.value //修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field, //更改的到字段
$this = $(this),
tr = $this.parents('tr'),
trIndex = tr.data('index'); //表格tr的行号(index值)
});
ps:上面监听表格的方法,我也是在网上找到的,但用在实际项目中发现,trIndex似乎得到的值不是很准确。如果需要对表格添加删除功能,当删除其中某一行时,trIndex值没有改变,因为删除时表格没有重新刷新。
table.cache[‘buildInputTable’]:
表示获取id为buildInputTable表格所有的值
在layui表格渲染时,done函数可以在表格渲染前对select设置默认值:
// 每次表格重载时都能保持select的值
layui.each($("select[name='isNecessary']"), function (index, item) {
var elem = $(item);
elem.val(默认值); //设置默认值
form.render();
});
select设置的是对应value值才会生效哦.
关于事件冒泡
笔者从零开始写了一个具有父子级关系的穿梭框,在点击左右穿梭按钮时,会出现点击一次按钮,穿梭多次的情况,想了许久才恍然大悟是事件冒泡导致的(平时项目都是插件,太久没有碰到冒泡了…),所以也记录下解决办法吧:
$('.boxLeft .pNode, .boxRight .pNode').on('click', function(e){
if(!e.isPropagationStopped()){
$('.boxLeft .pNode').css({
'background':'#fff',
'color':'black'
});
$('.boxLeft .childrenTree li').css({
'background':'#fff',
'color':'black'
});
$(this).css({
'background':'#1E9FFF',
'color':'#fff'
});
type = $(this).data('type');
pNodeIndex = $('.boxLeft .pNode').index($(this));
id = $(this).data('id');
pid = '';
if(!flag) {
$('.boxLeft .childrenTree').eq(pNodeIndex).show();
flag = !flag;
} else {
$('.boxLeft .childrenTree').eq(pNodeIndex).hide();
flag = !flag;
}
}
e.stopPropagation();
});
关键两行代码:
if(!e.isPropagationStopped()){***} //检测event.stopPropagation是否被调用过
e.stopPropagation();
数据共享配置页面
当点击其他同级菜单下的页面中的相同功能时,再返回数据共享配置页面时,点击页面中的功能按钮,没有效果;
原因: 不同页面间,相同的功能使用了一样的id(或者class类),导致页面间的交叉污染,功能错乱。!