表的渲染以及數據查詢。

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.	封裝的幾個類:下圖

在這裏插入圖片描述在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章