在leyui table 表格中使用input控件並監聽其事件

使用表格提供的屬性templet去處理，不需要另外去畫表格

html：

<table class="layui-hide" id="currentTable" lay-filter="currentTableFilter"></table>

js：

table.render({
　　elem: '#currentTable',
　　title: '課程大綱列表',
　　toolbar: '#toolbarDemo', //開啟頭部工具欄，並為其綁定左側模板
　　cols: [[ //標題欄
　　{ field: 'number', title: '序號', width: 50, type: 'numbers' }
　　, { field: 'DaGangKeChengDaiMa', title: '大綱代碼', width: 120 }
　　, { field: 'DaGangKeChengNeiRong', title: '大綱內容', minWidth: 250 }
　　, { field: 'DaGangXueShi', title: '大綱學時', minWidth: 100 }
　　, {
　　　　field: 'XueShi', title: '學時', width: 235, /*edit: 'number'*/ templet: (item) =>
　　　　{
　　　　　　var name = item.Id + "name";
　　　　　　var dmo = "<input lay-event='tabInput' type='number' value='" + item.XueShi + "' name='" + name + "' autocomplete='off' class='layui-input' id='" + item.Id + "' style='width: 200px; height: 28px; text-align: center; margin-left:20px;' />";
　　　　　　return dmo;
　　　　}
　　}
  ]],
　　data: data
});

//事件監聽

使用data列表中的id去做控件的id綁定，用於事件監聽。不管是獲取值還是監聽失去焦點的事件都可以直接用id定位控件。

//表格列表事件監聽
table.on('tool(currentTableFilter)', function (obj)
{
　　var data = obj.data;
　　if (obj.event === "tabInput")
　　{
　　　　//點擊了輸入框
　　　　//監聽輸入框事件
　　　　$("#" + data.Id).blur(() => {
　　　　　　var value = $("#" + data.Id).val();

　　　　});
　　}
});