1.界面顯示效果 2.資源下載 地址 1. jstree https://www.jstree.com/ 2.表格jqgrid https://blog.mn886.net/jqGrid/ 3.界面佈局 https://cloud.tencent.com/developer/section/1489 ...
1.界面顯示效果
2.資源下載 地址
1. jstree https://www.jstree.com/ 2.表格jqgrid https://blog.mn886.net/jqGrid/ 3.界面佈局 https://cloud.tencent.com/developer/section/1489925
3.前端代碼
@{ ViewBag.Title = "系統功能"; Layout = "~/Views/Shared/_Index.cshtml"; } <script> $(function () { InitialPage(); GetTree(); GetGrid(); }); //初始化頁面 function InitialPage() { //layout佈局 $('#layout').layout({ applyDemoStyles: true, onresize: function () { $(window).resize() } }); //resize重設(表格、樹形)寬高 $(window).resize(function (e) { window.setTimeout(function () { $('#gridTable').setGridWidth(($('.gridPanel').width())); $("#gridTable").setGridHeight($(window).height() - 141.5); $("#itemTree").setTreeHeight($(window).height() - 52); }, 200); e.stopPropagation(); }); } //載入樹 var _parentId = ""; function GetTree() { var item = { height: $(window).height() - 52, url: "../../SystemManager/Module/GetTreeJson", onnodeclick: function (item) { _parentId = item.id; $('#btn_Search').trigger("click"); } }; //初始化 $("#itemTree").treeview(item); } //載入表格 function GetGrid() { var selectedRowIndex = 0; var $gridTable = $('#gridTable'); $gridTable.jqGrid({ url: "../../SystemManager/Module/GetListJson?parentid=0", datatype: "json", height: $(window).height() - 141.5, autowidth: true, colModel: [ { label: "主鍵", name: "ModuleId", index: "ModuleId", hidden: true }, { label: "編號", name: "EnCode", index: "EnCode", width: 150, align: "left" }, { label: "名稱", name: "FullName", index: "FullName", width: 150, align: "left" }, { label: "地址", name: "UrlAddress", index: "UrlAddress", width: 350, align: "left" }, { label: "目標", name: "Target", index: "Target", width: 60, align: "center" }, { label: "菜單", name: "IsMenu", index: "IsMenu", width: 50, align: "center", formatter: function (cellvalue, options, rowObject) { return cellvalue == 1 ? "<i value=" + cellvalue + " class=\"fa fa-toggle-on\"></i>" : "<i value=" + cellvalue + " class=\"fa fa-toggle-off\"></i>"; } }, { label: "展開", name: "AllowExpand", index: "AllowExpand", width: 50, align: "center", formatter: function (cellvalue, options, rowObject) { return cellvalue == 1 ? "<i class=\"fa fa-toggle-on\"></i>" : "<i class=\"fa fa-toggle-off\"></i>"; } }, { label: "公共", name: "IsPublic", index: "IsPublic", width: 50, align: "center", formatter: function (cellvalue, options, rowObject) { return cellvalue == 1 ? "<i class=\"fa fa-toggle-on\"></i>" : "<i class=\"fa fa-toggle-off\"></i>"; } }, { label: "有效", name: "EnabledMark", index: "EnabledMark", width: 50, align: "center", formatter: function (cellvalue, options, rowObject) { return cellvalue == 1 ? "<i class=\"fa fa-toggle-on\"></i>" : "<i class=\"fa fa-toggle-off\"></i>"; } }, { label: "描述", name: "Description", index: "Description", width: 100, align: "left" } ], pager: false, rowNum: "1000", rownumbers: true, shrinkToFit: false, gridview: true, onSelectRow: function () { selectedRowIndex = $("#" + this.id).getGridParam('selrow'); }, gridComplete: function () { $("#" + this.id).setSelection(selectedRowIndex, false); } }); //查詢條件 $("#queryCondition .dropdown-menu li").click(function () { var text = $(this).find('a').html(); var value = $(this).find('a').attr('data-value'); $("#queryCondition .dropdown-text").html(text).attr('data-value', value) }); //查詢事件 $("#btn_Search").click(function () { $gridTable.jqGrid('setGridParam', { url: "../../SystemManager/Module/GetListJson", postData: { parentid: _parentId, condition: $("#queryCondition").find('.dropdown-text').attr('data-value'), keyword: $("#txt_Keyword").val() } }).trigger('reloadGrid'); }); //查詢回車 $('#txt_Keyword').bind('keypress', function (event) { if (event.keyCode == "13") { $('#btn_Search').trigger("click"); } }); } //新增 function btn_add() { dialogOpen({ id: "Form", title: '添加功能', url: '/SystemManager/Module/Form?parentId=' + _parentId, width: "700px", height: "430px", btn: null }); }; //編輯 function btn_edit() { var keyValue = $("#gridTable").jqGridRowValue("ModuleId"); if (checkedRow(keyValue)) { dialogOpen({ id: "Form", title: '編輯功能', url: '/SystemManager/Module/Form?keyValue=' + keyValue, width: "700px", height: "430px", btn: null }); } } //刪除 function btn_delete() { var keyValue = $("#gridTable").jqGridRowValue("ModuleId"); if (keyValue) { $.RemoveForm({ url: "../../SystemManager/Module/RemoveForm", param: { keyValue: keyValue }, success: function (data) { $("#gridTable").trigger("reloadGrid"); } }) } else { dialogMsg('請選擇需要刪除的數據項！', 0); } } </script> <div class="ui-layout" id="layout" style="height: 100%; width: 100%;"> <div class="ui-layout-west"> <div class="west-Panel"> <div class="panel-Title">功能目錄</div> <div id="itemTree"></div> </div> </div> <div class="ui-layout-center"> <div class="center-Panel"> <div class="panel-Title">功能信息</div> <div class="titlePanel"> <div class="title-search"> <table> <tr> <td> <div id="queryCondition" class="btn-group"> <a class="btn btn-default dropdown-text" data-toggle="dropdown">選擇條件</a> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a data-value="EnCode">編號</a></li> <li><a data-value="FullName">名稱</a></li> <li><a data-value="UrlAddress">地址</a></li> </ul> </div> </td> <td style="padding-left: 2px;"> <input id="txt_Keyword" type="text" class="form-control" placeholder="請輸入要查詢關鍵字" style="width: 200px;" /> </td> <td style="padding-left: 5px;"> <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i> 查詢</a> </td> </tr> </table> </div> <div class="toolbar"> <div class="btn-group"> <a id="lr-replace" class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i> 刷新</a> <a id="lr-add" class="btn btn-default" onclick="btn_add()"><i class="fa fa-plus"></i> 新增</a> <a id="lr-edit" class="btn btn-default" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i> 編輯</a> <a id="lr-delete" class="btn btn-default" onclick="btn_delete()"><i class="fa fa-trash-o"></i> 刪除</a> </div> <script>$('.toolbar').authorizeButton()</script> </div> </div> <div class="gridPanel"> <table id="gridTable"></table> </div> </div> </div> </div>View Code
4後端代碼
4.1 control
/// <summary> /// 功能列表 /// </summary> /// <param name="parentid">節點Id</param> /// <param name="condition">查詢條件</param> /// <param name="keyword">關鍵字</param> /// <returns>返回列表Json</returns> [HttpGet] public ActionResult GetListJson(string parentid, string condition, string keyword) { var data = NewObject<ModuleLogic>().GetListByCondition(parentid).datas; if (!string.IsNullOrEmpty(condition) && !string.IsNullOrEmpty(keyword)) { #region 多條件查詢 switch (condition) { case "EnCode": //編號 data = data.FindAll(t => t.EnCode.Contains(keyword)); break;
