前端外掛-LayUI-----表格的使用(增刪查改、搜尋、重新整理)
阿新 • • 發佈：2018-11-11
效果圖
表格引數
資料介面返回引數示例介面：
http://www.layui.com/demo/table/user/?page=1&limit=30
前臺頁面
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> @*這裡引入Layui Css資源(注意資源路徑)*@ <link href="~/Content/layui/css/layui.css" rel="stylesheet" /> </head> <body> <div> @*搜尋層*@ <div class="demoTable"> 按模板名稱搜尋： <div class="layui-inline"> <input class="layui-input" id="demoReload" autocomplete="off"> </div> <button class="layui-btn" data-type="reload">搜尋</button> </div> @*Table表格層*@ @*建立一個table例項 在頁面放置一個元素 <table id="test"></table>，然後通過 table.render() 方法指定該容器, 這裡使用的是表格自動渲染 引數:Url:資料介面路徑;Page:是否開啟分頁;id:表格唯一標示*@ <table class="layui-table" lay-data="{width:700, url:'/Home/Get_Data', page:true, id:'test'}" lay-filter="test"> <thead> <tr> <th lay-data="{field:'UserId', width:80, sort: true}">ID</th>@*資料欄位名稱*@ <th lay-data="{field:'UserName', width:80}">使用者名稱</th> <th lay-data="{field:'UserAge', width:80, sort: true}">年齡</th> <th lay-data="{field:'UserSex'}">性別</th> <th lay-data="{fixed: 'right', toolbar: '#barDemo', width:250, align:'center'}">操作</th> </tr> </thead> </table> </div> @*工具欄 在Table中使用 toolbar宣告一個 Id 放置在任意位置皆可*@ <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="detail">編輯</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a> </script> <script src="~/Scripts/jquery-1.10.2.js"></script>@*引入jquery*@ <script src="~/Content/layui/layui.js"></script>@*/引入Layui的js*@ <script> //建立例項 要想資料初始化 這裡必須要寫 layui.use(['table', 'layer', 'form'], function () { var table = layui.table; layer = layui.layer; form = layui.form; //搜尋 ----------------------------------------------- Begin----------------------------------------------------------- var $ = layui.$, active = { reload: function () { var demoReload = $('#demoReload').val();//獲取輸入框的值 //執行過載 table.reload('test', { page: { curr: 1 //重新從第 1 頁開始 } , where: { name: demoReload}//這裡傳參 向後臺 , url: '/Home/Temp_search'//後臺做模糊搜尋介面路徑 , method: 'post' }); } }; //這個是用於建立點選事件的例項 $('.demoTable .layui-btn').on('click', function () { var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); //搜尋 ----------------------------------------------- End----------------------------------------------------------- //監聽工具條 ----------------------------------------------- Begin----------------------------------------------------------- table.on('tool(test)', function (obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值" var data = obj.data; //獲得當前行資料 var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 引數對應的值） var tr = obj.tr; //獲得當前行 tr 的DOM物件 if (layEvent == 'detail') { layer.open( { type: 2, title: '編輯頁面', skin: 'layui-layer-molv', shadeClose: false, shade: 0.8, area: ['880px', '550px'], content: 'Url',//跳轉的頁面 cancel: function (index) { $(".layui-laypage-btn").click();//這裡用於關閉Open時觸發回撥函式 重新整理父頁面資料 一定要引入Jquery } }); //注：在這裡我不就做修改介面了 這裡這只是一個彈出框 彈出你的修改頁面 Content中你自定義自己的頁面路徑並傳引數 } else//刪除資料 { //刪除資料在這裡可以使用Ajax非同步 就和平常使用一樣簡單 $.post("/Home/DeleteInfoById", { id: data.UserId }, function (ret) { if (ret.code == "1") { layer.msg(ret.msg, { icon: 1, time: 1500 }, function () { obj.del(); //刪除對應行（tr）的DOM結構，並更新快取 $(".layui-laypage-btn").click(); }); } else { layer.msg(ret.msg, { icon: 2, time: 1500 }); } }); } }); //監聽工具條 ----------------------------------------------- ENd----------------------------------------------------------- }); </script> </body> </html>
後臺程式碼
using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Diagnostics.Contracts; using System.Linq; using System.Web; using System.Web.Mvc; namespace WebApplication5.Controllers { public class HomeController : Controller { public static List<UserInfo> list = new List<UserInfo>()//模擬資料來源集合 { new UserInfo { UserId=1, UserName="測試1", UserAge=18, UserSex="男" }, new UserInfo { UserId=2, UserName="測試2", UserAge=18, UserSex="男" }, new UserInfo { UserId=3, UserName="測試3", UserAge=18, UserSex="男" }, new UserInfo { UserId=4, UserName="測試4", UserAge=18, UserSex="男" }, new UserInfo { UserId=5, UserName="測試5", UserAge=18, UserSex="男" }, new UserInfo { UserId=6, UserName="測試6", UserAge=18, UserSex="男" }, new UserInfo { UserId=7, UserName="測試7", UserAge=18, UserSex="男" }, new UserInfo { UserId=8, UserName="測試8", UserAge=18, UserSex="男" }, new UserInfo { UserId=9, UserName="測試9", UserAge=18, UserSex="男" }, new UserInfo { UserId=10, UserName="測試10", UserAge=18, UserSex="男" }, new UserInfo { UserId=11, UserName="測試11", UserAge=18, UserSex="男" }, new UserInfo { UserId=12, UserName="測試12", UserAge=18, UserSex="男" }, new UserInfo { UserId=13, UserName="測試13", UserAge=18, UserSex="男" }, new UserInfo { UserId=14, UserName="測試14", UserAge=18, UserSex="男" }, new UserInfo { UserId=15, UserName="測試15", UserAge=18, UserSex="男" }, new UserInfo { UserId=16, UserName="測試16", UserAge=18, UserSex="男" }, new UserInfo { UserId=17, UserName="測試17", UserAge=18, UserSex="男" }, new UserInfo { UserId=18, UserName="測試18", UserAge=18, UserSex="男" }, new UserInfo { UserId=19, UserName="測試19", UserAge=18, UserSex="男" }, new UserInfo { UserId=20, UserName="測試21", UserAge=18, UserSex="男" } }; public ActionResult Index() { return View(); } /// <summary> /// 將泛型物件序列化為json字串 /// </summary> /// <typeparam name="T">型別T</typeparam> /// <param name="obj">泛型物件</param> /// <returns>json字串</returns> public static string JsonSerialize<T>(T obj) { Contract.Requires(obj != null); return JsonConvert.SerializeObject(obj); } /// <summary> /// 模糊查詢 /// </summary> /// <returns></returns> [HttpPost] public JsonResult Temp_search(int limit, int page) { string key = Request["name"].ToString();//接收值 List<UserInfo> listData = list.Where(a=>a.UserName.Contains(key)).ToList(); //查詢 int counts = listData.Count; listData = listData.Skip(limit * (page - 1)).Take(limit).ToList(); return Json(new { code = 0, msg = "", count = counts, data = listData }, JsonRequestBehavior.DenyGet); } /// <summary> /// 初始化資料分頁 /// </summary> /// <param name="page"></param> /// <param name="limit"></param> /// <returns></returns> public string Get_Data(int page,int limit) { List<UserInfo> listData = list; int count = listData.Count;//記錄總條數 listData = listData.Skip(limit * (page - 1)).Take(limit).ToList();//MVC分頁 return "{\"code\":0,\"msg\":\"\",\"count\":" + count + ",\"data\":" +JsonSerialize(listData) + "}";//返回資料格式 } /// <summary> /// 刪除資訊 /// </summary> /// <returns></returns> [HttpPost] public JsonResult DeleteInfoById() { int id = 0; string code = "1"; string msg = "刪除成功！"; try { id =int.Parse(Request["id"].ToString()); UserInfo u = new UserInfo(); ; foreach (var item in list) { if (item.UserId==id) { u = item; break; } } list.Remove(u); } catch (Exception ex) { msg=ex.Message; code = "2"; } return Json(new { code=code,msg=msg},JsonRequestBehavior.DenyGet); } } }
碼字不易 希望能幫到大家 喜歡的話給個關注吧。
未完待續..........