layui tree +table 实现点击左侧树，动态新增编辑行 （layui-v2.5.6）
样式代码，防止下拉框的下拉列表被隐藏---必须设置--- 此样式和表格的样式有冲突 如果表格列数太多 会出现错乱的情况
1 /* 防止下拉框的下拉列表被隐藏---必须设置--- 此样式和表格的样式有冲突 如果表格列数太多 会出现错乱的情况 目前我的解决方法是忽略下拉框的美化渲染 <select lay-ignore> */ 2 .layui-table-cell { 3 overflow: visible; 4 } 5 6 .layui-table-box { 7 overflow: visible; 8 } 9 10 .layui-table-body { 11 overflow: visible; 12 } 13 /* 设置下拉框的高度与表格单元相同 */ 14 td .layui-form-select{ 15 margin-top: -10px; 16 margin-left: -15px; 17 margin-right: -15px; 18 }
页面代码显示列
<form class="layui-form" id="fromId" action="#"> <div id="tree1" style="margin:20px 10px;"> <table id="demo" lay-filter="tableFilter"></table> </form> // 如果将button 放入form 中，点击按钮执行函数后，会自动刷新当前页面 <button class="layui-btn" onclick="save();">保存</button> <button class="layui-btn" onclick="Application();">应用</button>
模板html ，{{# layui.each(tableColumnList, function(index, item){ }} 该方法是执行js 操作
<script type="text/html" id="bar"> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> //tableColumnList 是js 从后台获取的json 数据。 <script type="text/html" id="selectTool"> <select name="selectDemo" lay-filter="selectDemo"> <option value="">请选择或输入</option> {{# layui.each(tableColumnList, function(index, item){ }} <option value="{{item.COLUMN_NAME}}">{{ item.COLUMN_NAME }}</option> {{# }); }} </select> </script>
js 渲染layui + 请求数据操作
1 <script type="text/javascript"> 2 // 获取的是下拉框的数据，这种方法可能会有隐患 3 var tableColumnList = @Html.Raw(ViewBag.ColumnList); 4 var myajaxData = []; // table + 选中的数据 全局数组对象 5 6 // layui 渲染，执行，监听 7 layui.use(['tree', 'util', 'table', 'form', 'jquery'], function () { 8 9 var CONFIG_LINKED_DATA = { 10 ID: '1001', 11 DATA_ITEM_ID: '', 12 DATA_ITEM_NAME: '', 13 DATA_TABLE: '', 14 ID_NUMBER_FIELD: '', 15 FOREIGN_KEY_FIELD: '', 16 SET_TIME: '' 17 }; 18 var tree = layui.tree 19 , layer = layui.layer 20 , util = layui.util 21 , table = layui.table 22 , form = layui.form 23 , $ = layui.jquery; 24 var tableObj = table.render({ 25 elem: '#demo' //指定原始表格元素选择器（推荐id选择器） 26 //, height: 315 //容器高度 27 //, data: dataTable.data 28 //, toolbar: '#toolbarDemo' 29 , defaultToolbar: [] 30 , cols: [[ 31 //{ field: 'ID', title: 'ID', sort: true, fixed: 'left' } 32 , { field: 'DATA_ITEM_NAME', title: '数据项名称',width:'15%', edit: 'text' } 33 , { field: 'DATA_TABLE', title: '数据源表',width:'22%', edit: 'text' } 34 , { title: '人口信息',width:'15%', templet: function (d) { return 'TAB_PERSON' } } 35 , { field: 'ID_NUMBER_FIELD',width:'20%', title: '身份证字段', templet: '#selectTool' } 36 , { field: 'FOREIGN_KEY_FIELD',width:'20%', title: 'person字段' , templet: '#selectTool'} 37 , { title: '操作', toolbar: '#bar', fixed: 'right', align: 'center' } 38 ]] 39 , text: { 40 none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增 41 } 42 //,ID:"demo1" 43 //,data:myajaxData 44 //, url: 'url' // 我发现如果直接写上url 配置的话，就没法动态添加行 。所以选择先用ajax方法请求数据回来，再渲染table.reload({data:myajaxData})数据 45 , done: function (res, curr, count) { 46 //debugger; 47 myajaxData = res.data; 48 //如果是异步请求数据方式，res即为你接口返回的信息。 49 50 //这里是表格重载的时候 回显下拉框的数据 51 $('tr').each(function(e){ 52 var $cr=$(this); // 获取当前行的所有元素 53 //var dataIndex = $cr.attr("data-index"); 54 55 var dataIndex = $cr.attr("data-index"); 56 57 $.each(myajaxData,function(index,value){ 58 59 if(value.LAY_TABLE_INDEX==dataIndex){ 60 61 $cr.find("td").eq(3).find('input').val(value.ID_NUMBER_FIELD); 62 $cr.find("td").eq(4).find('input').val(value.FOREIGN_KEY_FIELD); 63 } 64 65 }); 66 }); 67 68 } 69 }); 70 LoadInfo1(); //获取table 数据并渲染 71 72 var treeIns = tree.render({ 73 elem: '#tree1' 74 , data: LoadInfo() 75 , showCheckbox: true //是否显示复选框 76 , id: 'demoId1' 77 //, isJump: true //是否允许点击节点时弹出新窗口跳转 78 ,oncheck: function (obj) { 79 //console.log(JSON.stringify(obj.data)); //得到当前点击的节点数据 80 //选中当前的节点数据，如果数据在table 数组对象中存在就不需要，push 新数据 81 if (obj.checked == true) { 82 83 var treecheckeddata = obj.data; 84 var linked_data={}; 85 86 linked_data.DATA_ITEM_ID = treecheckeddata.id; 87 linked_data.DATA_ITEM_NAME = treecheckeddata.title; 88 linked_data.DATA_TABLE = treecheckeddata.attributes.datatable; 89 90 //debugger 91 //var filter_linked_data =myajaxData.filter(function(element, index, self){ 92 // if(element.DATA_ITEM_ID == obj.data.id) 93 // return element; 94 //}); 95 96 var myData =[]; 97 for (var i = 0; i < myajaxData.length; i++) { 98 if(myajaxData[i].DATA_ITEM_ID == obj.data.id) 99 { 100 myData.push(myajaxData[i]); 101 } 102 } 103 104 if(myData.length == 0) 105 { 106 myajaxData.push(linked_data); 107 } 108 109 110 linked_data = {}; // 重复勾选时，添加入新对象 111 112 tableObj.reload({ 113 data: myajaxData 114 }); 115 116 } 117 118 } 119 }); 120 121 function LoadInfo1() { 122 var jsonstr1 = ''; 123 $.ajax({ 124 url: 'url', 125 //data: { id: '1' }, 126 type: 'post', 127 dataType: 'json', 128 async: false, 129 success: function (result) { 130 //debugger; 131 if (result) { 132 jsonstr1 = result; 133 myajaxData = jsonstr1.data; 134 135 tableObj.reload({ data: myajaxData }); 136 137 } 138 }, 139 error: function (xhr, status) { } 140 }); 141 142 return jsonstr1; 143 } 144 145 // 监听下拉框的值 146 form.on('select(selectDemo)', function (data) { 147 // 通过data.elem.dataset可以得到保存的对象id 148 // data.elem.value可以得到下拉框选择的文本 149 150 var select_value =data.elem.value; 151 var dataIndex =$(this).parents().parent('tr').attr("data-index"); 152 var select_td_field =$(this).parents("td").attr("data-field"); 153 154 //选择下拉框的值，给全局变量myajaxData 赋值 155 $.each(myajaxData,function(index,value){ 156 157 if(value.LAY_TABLE_INDEX == dataIndex && select_td_field == "ID_NUMBER_FIELD"){ 158 value.ID_NUMBER_FIELD = select_value; 159 } 160 if(value.LAY_TABLE_INDEX == dataIndex && select_td_field == "FOREIGN_KEY_FIELD"){ 161 value.FOREIGN_KEY_FIELD =select_value; 162 } 163 }); 164 }) 165 166 //监听删除事件 167 table.on('tool(tableFilter)', function (obj) { 168 if (obj.event === 'del') { 169 obj.del(); 170 //console.log(obj.data.DATA_ITEM_ID); 171 172 //var tree_checked = obj.data.DATA_ITEM_ID; 173 //var checkData = tree.getChecked('demoId1'); 174 //$.each(checkData,function(index,value){ 175 // console.log(value); 176 177 // if(value.id == tree_checked && value.children.length ==0) 178 // { 179 // value.checked =true; 180 // }else{ 181 // $.each(value.children,function(item,value1){ 182 // console.log("children",value1); 183 // if(value1.id == tree_checked) 184 // { 185 // value1.checked = false; 186 // } 187 // }) 188 // } 189 //}) 190 191 //treeIns.reload({ 192 // checked:checkData, 193 //}); 194 195 }; 196 }); 197 198 199 200 //提交数据到后台保存 201 //form.on('submit(*)', function (data) { 202 // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 203 //}); 204 205 //请求Tree 数据 206 function LoadInfo() { 207 var jsonstr = ''; 208 $.ajax({ 209 url: 'url', 210 //data: { id: '1' }, 211 //contentType: 'application/json;charset=utf-8', 212 type: 'post', 213 dataType: 'json', 214 async: false, 215 success: function (result) { 216 if (result) { 217 jsonstr = result.Data; 218 } 219 }, 220 error: function (xhr, status) { } 221 }); 222 return jsonstr; 223 } 224 225 //根据有效表名，获取下拉菜单的数据 226 function LoadInfo2(tableName) { 227 tableName = tableName != null ? tableName : "TAB_PERSON"; 228 $.ajax({ 229 url: 'url', 230 data: { tableName: tableName }, 231 //contentType: 'application/json;charset=utf-8', 232 type: 'post', 233 dataType: 'json', 234 async: false, 235 success: function (result) { 236 if (result) { 237 tableColumnList = result.Data; 238 } 239 }, 240 error: function (xhr, status) { } 241 }); 242 243 return tableColumnList; 244 } 245 246 }); 247 248 249 function save() 250 { 251 //console.log("提交myajaxData数据",JSON.stringify(myajaxData)); 252 //删除数组对象中的空[] ,[[],{},{name:'',sex:''}] 如果是{},=>JSON.stringify(arr[i]) == "{}" 253 for (var i = 0; i < myajaxData.length; i++) { 254 //这里面前两个判断条件只针对普通数组 255 if (myajaxData[i] == null || myajaxData[i] == "") { 256 myajaxData.splice(i, 1); 257 i = i - 1; 258 } 259 } 260 //console.log(JSON.stringify(myajaxData)); 261 $.ajax({ 262 url:"/ComprehensiveDataCorrelation/Save_ICONFIG_LINKED_DATA", 263 // async:false, 264 type:"post", 265 //dataType:"json", 266 contentType: "application/json",//向后台传送格式 267 data:JSON.stringify({ model:myajaxData}), 268 success:function(result){ 269 270 if(result.Success){ 271 layer.msg('保存成功！'); 272 //window.location.href="/ComprehensiveDataCorrelation/DataCorrelationIndex"; 273 }else{ 274 layer.msg(result.msg); 275 } 276 } 277 }); 278 } 279 280 function Application() { 281 $.ajax({ 282 url: '/ComprehensiveDataCorrelation/ToolApplication', 283 data: { toolType: "link" }, 284 type: 'post', 285 dataType: 'json', 286 success: function (result) { 287 if (result) { 288 layer.msg("操作成功!"); 289 } else { 290 layer.msg("操作失败!"); 291 } 292 }, 293 error: function (xhr, status) { } 294 }); 295 } 296 </script> 297
参考资料： layui 新增编辑行 layui 官方文档
