在Layui中操作數(shù)據(jù)表格給指定單元格添加事件的示例分析-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“在Layui中操作數(shù)據(jù)表格給指定單元格添加事件的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“在Layui中操作數(shù)據(jù)表格給指定單元格添加事件的示例分析”這篇文章吧。

成都創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)科爾沁右翼前,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):18980820575

當(dāng)我們?cè)诓僮鲾?shù)據(jù)表格的時(shí)候，并不是一定要點(diǎn)擊表格工具欄中的“查看”按鈕，來(lái)進(jìn)行查看，而是點(diǎn)擊某一特定的列來(lái)進(jìn)行某些數(shù)據(jù)查看。例如下圖這樣。

這就涉及到表格的自定義事件。代碼如下：

<table id='task-list' lay-filter='task-list'></table> // 需要渲染的表格

var tableInit = function (data) {
  table.render({
   elem: '#task-list'
   , height: 472
   , title: '決策場(chǎng)景信息'
   , limit: data.length + 1
   , page: {
    theme: '#1E9FFF',
    layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'] //自定義分頁(yè)布局
    , limit: 10
    , groups: 1 //只顯示 1 個(gè)連續(xù)頁(yè)碼
    , first: false //不顯示首頁(yè)
    , last: false //不顯示尾頁(yè)
   }
   , cols: [[
    {field: 'id', title: '序號(hào)', width: 60, style: 'font-size: 12px; color: #666'},
    {field: 'modelNum', title: '場(chǎng)景模型編號(hào)', style: 'font-size: 12px; color: #666'},
    {field: 'modelName', title: '場(chǎng)景模型名稱(chēng)', style: 'font-size: 12px; color: #666'},
    {field: 'taskNum', title: '當(dāng)前任務(wù)編號(hào)', style: 'font-size: 12px; color: #666'},
    {field: 'taskLevel', title: '當(dāng)前任務(wù)階段', width: 150, templet: "#level", style: 'font-size: 12px; color: #666'},
    {field: 'report', title: '報(bào)告', width: 60, event: 'viewReport', templet: "#reportID", style: 'font-size: 12px; color: #666; cursor:pointer'},
    // 這里設(shè)置event，事件名稱(chēng)自定義。
    {field: 'history', title: '歷史任務(wù)', width: 100, style: 'font-size: 12px; color: #666'},
    {
     fixed: 'right',
     title: '操作',
     width: 100,
     toolbar: "#table-linetoolbar",
     align: 'center',
     style: 'font-size: 12px; color: #666'
    }
   ]]
   , cellMaxWidth: 100
   , parseData: function (res) {
    return res;
   }
   , data: data
   , id: 'task-list'
  });

table.on('tool(task-list)', function (obj) {
   let event = obj.event;

 if (event === "viewReport"){
 // 處理你的業(yè)務(wù)邏輯
 }
}

這樣就可以給某特定列設(shè)置自定義事件了。

以上是“在Layui中操作數(shù)據(jù)表格給指定單元格添加事件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：在Layui中操作數(shù)據(jù)表格給指定單元格添加事件的示例分析-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://muchs.cn/article12/pdegc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、軟件開(kāi)發(fā)、用戶(hù)體驗(yàn)、企業(yè)建站、響應(yīng)式網(wǎng)站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)