layui 笔记

1. layui form select 取值异常
   如果设置中的option选项的ID值出现一致的情况，则会导致取值混乱

   HTML:基础知识，ID唯一

   // 根据ID值进行 selected 的option 的文本值
   $("#QC-data-device-id option:selected").text()
   

2. layui table 的even事件

	table.render({
				...
				elem:'#table_id'
				, even:true
	            , cols: [[ //表头
	                {field: 'clickValue', title: '点击事件列', sort: true, fixed: 'left', width: "8%",even:"clickEven"}
	            ]]
	        });
	
	table.on('tool(table-filter)', function(obj){
        var data = obj.data;
        // console.log(data) data为当前行的数据组成的字典
        if(obj.event === 'clickEven'){
          layer.prompt({
            formType: 2
            // ,title: '修改ID为['+ data.id +'] 的测试描述'
            ,title: '修改ID值为为['+ data.id +'] 的数据行'
            ,value: data.clickValue
          }, function(value, index){
            layer.close(index);
			// value为修改后的单元格的值
            
			//这里一般是发送修改的Ajax请求
			
            //同步更新表格和缓存对应的值,这里的缓存可以在 layui.table.cache中查看到
            obj.update({
              clickValue: value
            });
            console.log("修改数据")
            console.log(layui.table.cache['table_id'])
          });
        }
      });

3. layui table 的表头与数据行没对齐?
   
   引起原因则是，cols首行中的逗号引起的，如上方截图，删除红色方框的逗号即可

   table.render({
           elem: '#QC_all_flow'
   		...
           , cols: [[ //表头
               {field: 'id', title: '测试项ID', sort: true, fixed: 'left', width: "8%"}
          ...
           ]]
       })
   

4. layui table 单元格中嵌入开关，如何，将对应的开关值同表格一起读取？

   解决思路:使用单元格的even事件对点击进行监听，修改单元格在表格中的缓存值
   layui switch 的样式也随之变化
   这时候我们直接读取到的表格数据，便和实际展示的开关的数据一致

   // 直接截图对应table的行首做示例,对传入值进行初始化样式加载
   , {field: 'result', title: '结果', width: "10%",event:'clickChange',templet:function (d) {
         if(d.result==0){
             return '<input type="checkbox" name="qc_result" value="'+ d.result.toString() + '" lay-skin="switch" lay-text="通过|不通过" lay-filter="qc_result_filter" checked>'
         }else{
             return '<input type="checkbox" name="qc_result" value="'+ d.result.toString() + '" lay-skin="switch" lay-text="通过|不通过" lay-filter="qc_result_filter">'
         }
   
     }}
   
   // 监听当前列的点击事件
    table.on('tool(table_filter)', function(obj) {
       var data = obj.data;
       if(obj.event === 'clickChange') {
           console.log(obj)
           if(data.result==1){
               var value=0
           }else{
               var value=1
           }
           obj.update({
               result: value
           });
           console.log("修改数据")
       }
   
   })