表格的渲染!

開發工具與關鍵技術:VS
作者:心華
撰寫時間:2019/04/22
  1. 寫好查詢語句之後的表格的渲染。

在這裏插入圖片描述
2. 這裏表格的數據處理用到layui插件,把layui插件放到項目並引用

3.之後進行表格的渲染,

在這裏插入圖片描述

 var TabAcademe;//layui的表格,聲明的一個變量
          //var layerIndex = 0;
              var layer, layuiTable;//保存layui模塊以便全局使用
            $(document).ready(function () {
            layui.use(['table', 'layer'], function () {
                layer = layui.layer, layuiTable = layui.table;//layuiTable模塊加載
                     //執行渲染
                     //進行表格渲染.調用方法render
                TabAcademe = layuiTable.render({
                    //.設置方法裏面的配置項(參數),elem指定原始表格元素選擇器如ID選擇器、url數據接口(數據請求的路徑)、cols表頭
                    elem: '#tabAcademe',
                    url: '/CollegeInfor/SelectAcademeAll//(SelectAcademeAll控制器那邊的方法名)',
                    cols: [[//數組
                        //JSON的對象,title設定標題名稱,type設定列的類型(值有nomal常規列、radlio單選框列、checkbox(複選框列)、numbers序號列、space空列
                         { title: '選擇', type: 'radio' },
                         { title: '序號', type: 'numbers' },
                         { title: '學院名稱', field: 'AcademeName', align: 'center' },
                         { title: '學院代號', field: 'AcademeCode', align: 'center' },
                         { title: '操作', templet: setOption, align: 'center' },
                    ]],
                    page: {
                        limit: 5,//顯示條數
                        limits:[5,9,10]//顯示頁數
                    }
                });
            })
        });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章