1. 今天我們做一個表格渲染,我的表格,我用的是layui,我們須把
2. “<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
3. ”和“<script src="~/Plugins/layui/layui.js"></script>”進行引入。
4. <!-- 注意:如果你直接複製所有代碼到本地,上述路徑需要改成你本地的 -->
5. @*表格*@
6. <table class="layui-hide" id="tabGoodsPackage"></table>
7. <script>
8. @*表格*@
9. layui.use(['table',], function () {
10. layuiTable = layui.table;
11. layuiTable.render({
12. elem: '#tabGoodsPackage',
13. height: '500px',
14. url: '/Huimarketing/HuiMarketing/SelectGoodsPackagea',
15. cols: [[
16. { title: '序號', type: 'numbers' },
17. { title: '操作', templet: setOption, align: 'center' },
18. { title: '套餐編號', field: 'PackageNumber', align: 'center' },
19. { title: '套餐名稱', field: 'PackageName', align: 'center' },
20. { title: '套餐商品', field: 'GoodsPackageID', align: 'center'},
21. { title: '備註', field: 'remark', align: 'center' },
22. ]],
23. page: {
24. limit: 10,
25. limits: [5, 9, 10]
26. }
27. });
28. })
29. //1.0 自定義列模板的方法
30. function setOption(data) {
31. console.log(data.GoodsPackageID);
32. var btn = "";
33. btn = '<button class="layui-btn layui-btn-sm" onclick="Update(' + data.GoodsPackageID + ')">修改</button>';
34. btn += '<button class="layui-btn layui-btn-warm layui-btn-sm" onclick="DeleteAcademe(' + data.GoodsPackageID + ')">刪除</button>'
35. return btn;
36. }
37. </script>
38. /// <summary>
39. /// 慧營銷-商品套餐-查詢數據
40. /// </summary>
41. /// <param name="layuiTablePage"></param>
42. /// <returns></returns>
43. public ActionResult SelectGoodsPackagea(LayuiTablePage layuiTablePage)
44. {
45. List<S_GoodsPackage> list = myModels.S_GoodsPackage.ToList();//查詢全部數據
46. //List<S_GoodsPackage> list1 = (from tbGoodsPackage in myModels.S_GoodsPackage
47. // select tbGoodsPackage).ToList();
48. int count = list.Count();//數據庫中套餐總條數
49. list = list.OrderBy(m => m.GoodsPackageID)//OrderBy排序方式
50. .Skip(layuiTablePage.GetGoodsPackage()).Take(layuiTablePage.limit).ToList();
51. LayuiTableData<S_GoodsPackage> layuidata = new LayuiTableData<S_GoodsPackage>();
52. layuidata.count = count;
53. layuidata.data = list;
54. return Json(layuidata, JsonRequestBehavior.AllowGet);
55. 完成的效果實例
56. 封裝的幾個類:下圖
表的渲染以及數據查詢。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.