<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        Layui table 組件的使用之初始化加載數據、數據刷新表格、傳參數

        來源:懂視網 責編:小采 時間:2020-11-27 22:30:40
        文檔

        Layui table 組件的使用之初始化加載數據、數據刷新表格、傳參數

        Layui table 組件的使用之初始化加載數據、數據刷新表格、傳參數:背景 筆者之前一直使用 bootstrap table ,因為當前項目中主要使用 Layui 框架,于是也就隨了 Layui table ,只是在使用的時候出現了一些問題,當然也是怪自己不熟悉的鍋吧! 出現的問題: 1、使用 Layui 官方提供的 【轉換靜態表格】 方式初始化加載時報
        推薦度:
        導讀Layui table 組件的使用之初始化加載數據、數據刷新表格、傳參數:背景 筆者之前一直使用 bootstrap table ,因為當前項目中主要使用 Layui 框架,于是也就隨了 Layui table ,只是在使用的時候出現了一些問題,當然也是怪自己不熟悉的鍋吧! 出現的問題: 1、使用 Layui 官方提供的 【轉換靜態表格】 方式初始化加載時報

        背景

        筆者之前一直使用 bootstrap table ,因為當前項目中主要使用 Layui 框架,于是也就隨了 Layui table ,只是在使用的時候出現了一些問題,當然也是怪自己不熟悉的鍋吧!

        出現的問題:

        1、使用 Layui 官方提供的 【轉換靜態表格】 方式初始化加載時報 id 找不到的錯誤(自己的鍋)

        2、傳遞參數問題(姑且算是 Layui 官方的鍋)

        筆者使用的 table 加載刷新方案

        有一個頁面,左側是一個 tree,右側是一個 table,默認 table 加載全數據,當點擊 tree 節點時,table 進行篩選,很簡單的需求吧!

         

        這里我們不談 tree 的使用,將僅僅貼出 table 的相關方法!

        首先貼出源表格代碼:

        <table class="layui-table" lay-filter="EditListTable">
         <thead>
         <tr>
         <th lay-data="{field:'Index', width:60}">序號</th>
         <th lay-data="{field:'UserId', width:80}">銷售ID</th>
         <th lay-data="{field:'UserName', width:80}">姓名</th>
         <th lay-data="{field:'Year', width:70}">年份</th>
         <th lay-data="{field:'M01', width:80}">一月</th>
         <th lay-data="{field:'M02', width:80}">二月</th> 
         <th lay-data="{field:'YearValue', width:80, fixed: 'right'}">年度</th>
         <th lay-data="{width:100, align:'center', toolbar: '#barDemo1', fixed: 'right'}">操作</th>
         </tr>
         </thead>
        </table>
        <script type="text/html" id="barDemo1">
         <a class="layui-btn layui-btn-mini" lay-event="edit">編輯</a>
        </script>

        直接在代碼中通過注釋講解:

        (function () {
         //加載列表的后端 url
         var getListUrl = '';
         //對于任意一個 table,按照官方的說法,有三種不同的初始化渲染方式,不多介紹,而這里使用的方式姑且看做第三種:轉換靜態表格 方式
         //轉換靜態表格方式,自然首先需要有一個已經存在的表格,然后再通過 js 方式轉化為 Layui 表格
         //無論哪種方式的 Layui table 初始化自然需要配置項
         //通過轉化的方式初始化 Layui table,配置項部分可以在 源table中,部分在js中,源 table 的源代碼上文已經給出,下面給出一個示例的 js 中的配置項
         var tableOptions = {
         url: getListUrl, //請求地址
         method: 'POST', //方式
         id: 'listReload', //生成 Layui table 的標識 id,必須提供,用于后文刷新操作,筆者該處出過問題
         page: false, //是否分頁
         where: { type: "all" }, //請求后端接口的條件,該處就是條件錯誤點,按照官方給出的代碼示例,原先寫成了 where: { key : { type: "all" } },結果并不是我想的那樣,如此寫,key 將是后端的一個類作為參數,里面有 type 屬性,如果誤以為 key 是 Layui 提供的格式,那就大錯特錯了
         response: { //定義后端 json 格式,詳細參見官方文檔
         statusName: 'Code', //狀態字段名稱
         statusCode: '200', //狀態字段成功值
         msgName: 'Message', //消息字段
         countName: 'Total', //總數字段
         dataName: 'Result' //數據字段
         }
         };
         //
         layui.use(['table', 'layer'], function () {//layui 模塊引用,根據需要自行修改
         var layer = layui.layer, table = layui.table;
         //表初始化
         var createTable = function () {
         table.init('EditListTable', tableOptions);// table lay-filter
         };
         //表刷新方法
         var reloadTable = function (item) {
         table.reload("listReload", { //此處是上文提到的 初始化標識id
         where: {
         //key: { //該寫法上文已經提到
         type: item.type, id: item.id
         //}
         }
         });
         };
         //表初始化
         createTable();
         //其他和 tree 相關的方法,其中包括 點擊 tree 項調用刷新方法
         });
        })();

        后端方法:

        //本示例中,后臺代碼寫法
        public ActionResult GetGoalList(string type, string id)
        {
         //
        }
        
        //如果按照官方文檔條件項,應該是下面的寫法
        
        public ActionResult GetGoalList(keyItem key)
        {
         //
        }
        public class keyItem
        {
         public string id { get; set; }
         public string type { get; set; }
        }

        總結

        以上所述是小編給大家介紹的Layui table 組件的使用之初始化加載數據、數據刷新表格、傳參數,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        Layui table 組件的使用之初始化加載數據、數據刷新表格、傳參數

        Layui table 組件的使用之初始化加載數據、數據刷新表格、傳參數:背景 筆者之前一直使用 bootstrap table ,因為當前項目中主要使用 Layui 框架,于是也就隨了 Layui table ,只是在使用的時候出現了一些問題,當然也是怪自己不熟悉的鍋吧! 出現的問題: 1、使用 Layui 官方提供的 【轉換靜態表格】 方式初始化加載時報
        推薦度:
        標簽: 表格 加載 使用
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 99视频免费观看| 国产一级淫片免费播放| 亚洲www77777| 亚洲国产午夜中文字幕精品黄网站| 成人精品综合免费视频| 亚洲图片在线观看| 国产一区二区视频免费| 久久精品国产大片免费观看| 国产亚洲精品影视在线| 亚洲桃色AV无码| 免费涩涩在线视频网| 免费国产99久久久香蕉| 色偷偷噜噜噜亚洲男人| 亚洲av丰满熟妇在线播放| 韩国欧洲一级毛片免费| 午夜网站在线观看免费完整高清观看 | 免费看国产精品麻豆| 天黑黑影院在线观看视频高清免费| 亚洲精品成人av在线| 国产又大又黑又粗免费视频| 免费视频成人片在线观看| 特级毛片A级毛片免费播放| 国产精品久久亚洲不卡动漫| 亚洲大成色www永久网站| 日韩亚洲国产综合久久久| 国产h视频在线观看网站免费| www成人免费观看网站| 亚洲午夜无码久久| 亚洲天天在线日亚洲洲精| 国产亚洲av人片在线观看| 青青草国产免费久久久下载| 最好看最新的中文字幕免费| jizz免费观看| 亚洲AV无码专区在线观看成人| 亚洲喷奶水中文字幕电影 | 亚洲乱码一区二区三区国产精品| 日本亚洲成高清一区二区三区 | 久久精品国产精品亚洲毛片| 在线观看亚洲天天一三视| 国产精品冒白浆免费视频| 性色av无码免费一区二区三区|