欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layui 笔记

程序员文章站 2022-03-02 12:14:36
...
  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'])
          });
        }
      });



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

    table.render({
            elem: '#QC_all_flow'
    		...
            , cols: [[ //表头
                {field: 'id', title: '测试项ID', sort: true, fixed: 'left', width: "8%"}
           ...
            ]]
        })
    
  2. 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("修改数据")
        }
    
    })
    
相关标签: datagrid layui js