1. 程式人生 > 其它 >在leyui table 表格中使用input控制元件並監聽其事件

在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();

    });
  }
});