記錄layui的table綁定事件與選項卡的使用

項目需要在layui動態生成的表格中綁定事件，點擊選項彈出新的選項卡

父頁面內容

 子頁面內容

 

 

 js代碼：

layui.use('table',function() {

var table = layui.table;
    table.render({
        elem : '#yhgl-table',
        height : 'full-180',
        url : '/projectlx/find',
        cols : [[{field : 'projectno',title : '項目名稱',width : 120,templet : '<div><a href="javascript:;" _id="{{d.id}}" _code="{{d.code}}"  _nd="{{d.nd}}"  onclick="showChapters(this,{{d.projectno}});" class="layui-table-link">{{d.projectno}}</a></div>',
　　　}]],
});

function showChapters(obj,param) {

　　//使用layui的element
　　layui.use(['element'], function () {
　　　　$ = layui.jquery;

　　　　//獲取element屬性
　　　　element = layui.element;

　　　　//獲取a標簽內的自定義屬性
　　　　var nd=$(obj).attr("_nd");
　　　　var id=$(obj).attr("_id");
　　　　var code=$(obj).attr("_code");

　　　　//拼接url
　　　　var url="component/jsxm/xmView.html?projectno="+param+"&id="+id+"&nd="+nd+"&code="+code;

　　　　window.parent.layui.element.tabAdd('layadmin-layout-tabs', {//從父頁面添加tab選項卡，如果不指定id，選項卡id會自增
　　　　　　title: '項目詳情'
　　　　　　,content: '<iframe frameborder="0" src="'+url+'" class="layadmin-iframe"></iframe>'//引入iframe框
　　　　　　, id: "view"
　　　　});
　　　　//獲取父頁面的div

　　　　var body = window.parent.document.getElementById("LAY_app_body");
　　　　var child = body.getElementsByTagName("div");
　　　　for(var i = 0 ; i < child.length ; i++){
　　　　　　 child[i].classList.remove("layui-show");//關閉之前的iframe
　　　　}
　　　　var div = document.createElement("div");//創建一個新的div
　　　　div.className = " layadmin-tabsbody-item layui-show";//打開創建的div
　　　　var context = "<iframe src='"+url+"' frameborder='0' class='layadmin-iframe'></iframe>";//填充div內容
　　　　div.innerHTML =context;
　　　　body.appendChild(div);
　　　　 window.parent.layui.element.tabChange('layadmin-layout-tabs', 'view');//添加選項卡后，默認此tab為選中狀態
　　});
}

效果圖片：

 

 

點擊項 目名稱后彈出新的選項卡