摘要:表格展示神器之一表格前言在寫后臺管理系統中使用最多的就是表格數據展示了,使用表格組件能提高大量的開發效率,目前主流的數據表格組件有等博主個人比較傾向于,極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈。
表格展示神器之一:layui表格
前言:在寫后臺管理系統中使用最多的就是表格數據展示了,使用表格組件能提高大量的開發效率,目前主流的數據表格組件有bootstrap table、layui table、easyUI table等....
博主個人比較傾向于layui,layui極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈。使用簡單引用模塊便捷,有豐富的擴展功能。
layui官網:https://www.layui.com/
bootstrap datatable中文文檔:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
目錄:
一、三種渲染表格的方式
二、在表格中添加編輯等按鈕
三、在表格中添加 表單控件
四、添加圖片展示
最終效果圖:
點擊圖片效果
點擊編輯
一、三種初始化渲染方式
我先從最簡單的初始化表格寫起,如果我直接把全部代碼帖出來,你們可能會看得頭暈
1,方法渲染:
var table = layui.table ,form = layui.form; layui.use(table, function () { // 引入 table模塊 table.render({ id:"dataTable",// elem: #layui_table_id,//指定表格元素 url: /menu/menuList.ajax, //請求路徑 cellMinWidth: 20 //全局定義常規單元格的最小寬度,layui 2.2.1 新增 ,skin: line //表格風格 line (行邊框風格)row (列邊框風格)nob (無邊框風格) //,even: true //隔行換色 ,page: true //開啟分頁 ,limits: [10,20,50] //每頁條數的選擇項,默認:[10,20,30,40,50,60,70,80,90]。 ,limit: 10 //每頁默認顯示的數量 ,method:post //提交方式 ,cols: [[ {type:checkbox}, //開啟多選框 { field: menuId, //json對應的key title: ID, //列名 sort: true // 默認為 false,true為開啟排序 } ]] }); });java后臺返回的json數據格式
{
code: 0,
count: 8, //總行數
data: [,…], //表格數據
msg: ""
}2,自動渲染方法 (以下代碼由官方提供,自動渲染的方法 適合復雜行頭時使用,一般建議使用上面的方法渲染)
<table class="layui-table" lay-data="{height:315, url:/demo/table/user/, page:true, id:test}" lay-filter="test"> <thead> <tr> <th lay-data="{field:id, width:80, sort: true}">IDth> <th lay-data="{field:username, width:80}">用戶名th> <th lay-data="{field:sex, width:80, sort: true}">性別th> <th lay-data="{field:city}">城市th> <th lay-data="{field:sign}">簽名th> <th lay-data="{field:experience, sort: true}">積分th> <th lay-data="{field:score, sort: true}">評分th> <th lay-data="{field:classify}">職業th> <th lay-data="{field:wealth, sort: true}">財富th> tr> thead> table>
二,如何添加編輯按鈕
var table = layui.table ,form = layui.form; layui.use(table, function () { // 引入 table模塊 table.render({ id:"dataTable",// elem: #layui_table_id,//指定表格元素 url: /menu/menuList.ajax, //請求路徑 cellMinWidth: 20 //全局定義常規單元格的最小寬度,layui 2.2.1 新增 ,skin: line //表格風格 line (行邊框風格)row (列邊框風格)nob (無邊框風格) //,even: true //隔行換色 ,page: true //開啟分頁 ,limits: [10,20,50] //每頁條數的選擇項,默認:[10,20,30,40,50,60,70,80,90]。 ,limit: 10 //每頁默認顯示的數量 ,method:post //提交方式 ,done: function(res, curr, count) { //表格數據加載完后的事件 //調用示例 layer.photos({//點擊圖片彈出 photos: .layer-photos-demo ,anim: 1 //0-6的選擇,指定彈出圖片動畫類型,默認隨機(請注意,3.0之前的版本用shift參數) }); //如果是異步請求數據方式,res即為你接口返回的信息。 //如果是直接賦值的方式,res即為:{data: [], count: 99} data為當前頁數據、count為數據總長度 console.log(res); //得到當前頁碼 console.log(curr); //得到數據總量 console.log(count); } ,cols: [[ {type:checkbox}, //開啟多選框 { field: menuId, //json對應的key title: ID, //列名 sort: true // 默認為 false,true為開啟排序 },{ fixed: right, title: 操作, width: 215, align:center, toolbar: #barDemo //綁定按鈕組 } ]] }); }); //監聽工具條 table.on(tool(dataTable), function(obj){ //注:tool是工具條事件名,test是table原始容器的屬性 lay-filter="對應的值" var data = obj.data //獲得當前行數據 ,layEvent = obj.event; //獲得 lay-event 對應的值 if(layEvent === detail){ layui.alert(JSON.stringifr(data)) ; //將編輯的行信息轉為json字符串 layer.msg(data.attrId); } else if(layEvent === del){ layer.msg(刪除+data.menuId); console.log(table) } else if(layEvent === edit){ }); } });
三,如何在表格中添加表單組件(以下我將推薦2種)
1,使用模塊引擎的方式(這種方法比較麻煩,個人推薦第二種)
{ //在表格對象cols屬性中添加 field: menuDisplay, / title: 是否顯示, templet: #isShow, //模板關聯以上定義的 unresize: true, filter: "isShow", sort: false }
2,使用 函數的方法
{ field: menuDisplay, title: 是否顯示, unresize: true, filter: "isShow", sort: false, templet: function (d) { if (d.menuDisplay == ‘Y’) { return` name = "menuDisplay" value = "`+d.menuId+`" lay - skin = "switch" lay - text = "顯示|隱藏" lay - filter = "isShow" > `; } else { return` name = "menuDisplay" value = "`+d.menuId+`" lay - skin = "switch" lay - text = "顯示|隱藏" lay - filter = "isShow" checked > `; } } }
四、 展示圖片
{ field: img, title: 圖片, unresize: true, sort: false, //style:height:100px;, templet:function (d) { return ``; } }
當表格數據加載完后再綁定屬性
代碼以提交碼云:https://gitee.com/gezi441/layui-table
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/1890.html
開發管理后臺是每一個開發人員都要熟悉的一個環節,作為后端程序員,公司的所有機密數據都掌握在我們手上,所以這個時候,如果不是公司的核心成員,是不能接觸到某些數據的,這個時候所有的工作都落到了我們的手上,從PS到Linux都需要我們親歷親為,還好發現了layui這個前端框架,很大程度上減輕了我們的壓力. 今天我們先來學習一下layui實現動態數據表,靜態數據表,以及表格的分頁,其中還涉及到動態刷新數據...
開發管理后臺是每一個開發人員都要熟悉的一個環節,作為后端程序員,公司的所有機密數據都掌握在我們手上,所以這個時候,如果不是公司的核心成員,是不能接觸到某些數據的,這個時候所有的工作都落到了我們的手上,從PS到Linux都需要我們親歷親為,還好發現了layui這個前端框架,很大程度上減輕了我們的壓力. 今天我們先來學習一下layui實現動態數據表,靜態數據表,以及表格的分頁,其中還涉及到動態刷新數據...
摘要:是一個基于的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置實現數據請求,減少前端重復開發的工作。注意這里一定要修改為自己項目的配置。列表頁列表頁支持通過表單傳參查詢數據,刷新表格等功能。 fsLayui 是一個基于layui的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置html實現數據請求,減少前端js重復開發的工作。 GitHub下載 碼云...
摘要:是一個基于的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置實現數據請求,減少前端重復開發的工作。注意這里一定要修改為自己項目的配置。列表頁列表頁支持通過表單傳參查詢數據,刷新表格等功能。 fsLayui 是一個基于layui的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置html實現數據請求,減少前端js重復開發的工作。 GitHub下載 碼云...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00