layui单元格可编辑、layui单元格插入select、

记录下最近工作中遇到一些容易忘记的知识点

想要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类），导致页面间的交叉污染，功能错乱。！