LigerUI权限系统之组织结构
先上图，再看代码。组织结构界面
组织结构添加:
组织结构修改：
组织结构删除：
我在做这个页面的时候treegrid 的远程数据加载让我很头痛，从LigerUI官网提供的Demo来看，它是根据json数据格式中的children来判断是否在前面显示展开按钮，官网提供的数据格式如下：
1 var TreeDeptData = { 2 Rows: [ 3 { 4 id: '01', name: "企划部", remark: "1989-01-12", 5 children: [ 6 { 7 id: '0101', name: "企划分部一", remark: "企划分部一" 8 }, 9 { 10 id: '0102', name: "企划分部二", remark: "企划分部二", children: 11 [ 12 { id: '010201', name: "企划分部二 A组", remark: "企划分部二 A组" }, 13 { id: '010202', name: "企划分部二 B组", remark: "企划分部二 B组" } 14 ] 15 }, 16 { id: '0103', name: "企划分部三", remark: "企划分部三" } 17 ] 18 }, 19 { id: '02', name: "研发部", remark: "研发部" }, 20 { id: '03', name: "产品部", remark: "产品部" } 21 ] 22 };
从数据格式可以看出，当这一项有子节点的时候，才有children属性，但我们后台绑定数据的时候，通常返回的是一个model，所以有无子节点的数据都会有children属性，而treegrid在展示的时候，它是根据children属性来判断的，即有children，就显示展开按钮，所以界面显示的时候就会有点不伦不类.但没关系，自从我们有了dynamic 后，很多问题都解决了:)
1 [NonAction] 2 public List<dynamic> GetOrgs(IEnumerable<t_org> orgs) 3 { 4 var result = new List<dynamic>(); 5 6 foreach (var item in orgs) 7 { 8 var children = _orgRepository.GetOrgChildrenNodeByParentCode(item.orgcode).ToList(); 9 if (children == null || children.Count() == 0) 10 { 11 result.Add(new 12 { 13 name = item.name, 14 orgcode = item.orgcode, 15 parentCode = item.parentCode 16 }); 17 } 18 else 19 { 20 21 result.Add(new 22 { 23 name = item.name, 24 orgcode = item.orgcode, 25 parentCode = item.parentCode, 26 children = GetOrgs(children) 27 }); 28 } 29 } 30 return result; 31 }
前端完整代码：
1 @section headerScripts{ 2 <style type="text/css"> 3 #grid { 4 margin-left: 10px; 5 margin-top: 10px; 6 } 7 </style> 8 <script type="text/javascript"> 9 var UrlOrgDataSource = '@Url.Action("OrgDataSource")'; 10 var UrlParentNode = '@Url.Action("ParentNode")'; 11 var UrlAddOrg = '@Url.Action("AddOrg")'; 12 var UrlModifyOrg = '@Url.Action("ModifyOrg")'; 13 var UrlDeleteOrg = '@Url.Action("DeleteOrg")'; 14 15 $(function () { 16 17 $("#grid").ligerGrid({ 18 columns: [ 19 { display: '组织结构名称', name: 'name', id:'tree1', align: 'left', width:'30%' }, 20 { display: '组织结构编码', name: 'orgcode', align: 'left',width:'30%' } 21 ], 22 width: '98%', 23 pageSizeOptions: [10, 30, 50], 24 height: '97%', 25 url: UrlOrgDataSource, 26 alternatingRow: true, 27 rowHeight: 30, 28 headerRowHeight: 30, 29 tree: { columnId: 'tree1' }, 30 toolbar: { 31 items: [ 32 { text: '增加', click: AddOrg, img: '@Url.Content("~/Content/LigerUI/icons/add.gif")' }, 33 { line: true }, 34 { text: '修改', click: ModifyOrg, img:'@Url.Content("~/Content/LigerUI/icons/modify.gif")' }, 35 { line: true }, 36 { text: '删除', click: DeleteOrg, img: '@Url.Content("~/Content/LigerUI/icons/delete.gif")' } 37 ] 38 } 39 40 } 41 ); 42 function AddOrg() { 43 if (!window.addWin) { 44 window.addWin = $.ligerDialog.open({ 45 target: $("#winAdd"), 46 height: 250, 47 width: 400, 48 title: "增加组织机构" 49 }); 50 $("#txtParentCode").ligerComboBox( 51 { 52 url: UrlParentNode, 53 valueField: 'orgcode', 54 textField: 'name', 55 selectBoxWidth: 135, 56 autocomplete: true, 57 width: 135, 58 hideOnLoseFocus: true, 59 css: 'combo' 60 } 61 62 ); 63 64 $("#btnCancel").click(function () { 65 window.addWin.hide(); 66 }); 67 68 $("#btnConfirm").click(function () { 69 70 var parentNode = $("#txtParentCode").ligerComboBox().getValue(); 71 var orgName = $("#txtOrgName").val(); 72 var orgCode = $("#txtOrgCode").val(); 73 74 75 if (orgName == "" || orgCode == "") { 76 alert("组织机构名称和组织机构编码不能为空！"); 77 return; 78 } 79 80 $.post(UrlAddOrg, 81 { parentNode: parentNode, orgName: orgName, orgCode: orgCode}, 82 function (data) { 83 if (data.result) { 84 alert("操作成功！"); 85 $("#grid").ligerGrid().reload(); 86 } else { 87 alert(data.msg); 88 } 89 }); 90 }); 91 } else { 92 window.addWin.show(); 93 } 94 } 95 function ModifyOrg() { 96 var ModifyDialog; 97 var grid = $("#grid").ligerGrid(); 98 var row = grid.getSelectedRow(); 99 if (row == null) { 100 alert("请选择一条数据"); 101 return; 102 } 103 $("#winModify").data("orgName", row.name); 104 $("#winModify").data("orgCode", row.orgcode); 105 106 107 if (!window.modifyWin) { 108 window.modifyWin = $.ligerDialog.open({ 109 target: $("#winModify"), 110 height: 250, 111 width: 400, 112 title: "修改组织机构" 113 }); 114 115 $("#txtModifyOrgName").val($("#winModify").data("orgName")); 116 $("#txtModifyOrgCode").val($("#winModify").data("orgCode")); 117 118 $("#btnModifyCancel").click(function () { 119 window.modifyWin.hide(); 120 }); 121 122 $("#btnModifyConfirm").click(function () { 123 124 var orgName = $("#txtModifyOrgName").val(); 125 var orgCode = $("#txtModifyOrgCode").val(); 126 127 if (orgName == "" || orgCode == "") { 128 alert("组织机构名称和组织机构编码不能为空"); 129 return; 130 } 131 132 $.post(UrlModifyOrg, { orgName: orgName, orgCode: orgCode }, function (data) { 133 if (data.result) { 134 alert("操作成功！"); 135 $("#grid").ligerGrid().reload(); 136 } else { 137 alert(data.msg); 138 } 139 }); 140 }); 141 } else { 142 $("#winModify").data("OrgName", row.name); 143 $("#winModify").data("orgCode", row.orgcode); 144 window.modifyWin.show(); 145 } 146 } 147 function DeleteOrg() { 148 var grid = $("#grid").ligerGrid(); 149 var row = grid.getSelectedRow(); 150 if (row == null) { 151 alert("请选择一条数据"); 152 return; 153 } 154 if (confirm("是否确定删除？")) { 155 $.post(UrlDeleteOrg, { orgCode: row.orgcode }, function (data) { 156 if (data.result) { 157 alert("删除成功！"); 158 $("#grid").ligerGrid().reload(); 159 } else { 160 alert(data.msg); 161 } 162 }); 163 } 164 } 165 }); 166 </script> 167 } 168 169 <div id="grid"></div> 170 171 <div id="winAdd" style="display: none;"> 172 <table class="tb" style="height: 170px;"> 173 <tr class="tr"> 174 <td class="td">父级：</td> 175 <td style="padding-right:45px;"> 176 <input id="txtParentCode" /></td> 177 </tr> 178 <tr class="tr"> 179 <td class="td">组织机构名称：</td> 180 <td> 181 <input id="txtOrgName" type="text" /></td> 182 </tr> 183 <tr class="tr"> 184 <td class="td">组织机构编码： 185 </td> 186 <td> 187 <input id="txtOrgCode" type="text" /> 188 </td> 189 190 </tr> 191 <tr class="tr"> 192 <td colspan="2"> 193 <button id="btnConfirm" class="ui-button">确定</button> 194 <button id="btnCancel" class="ui-button">取消</button> 195 </td> 196 </tr> 197 </table> 198 </div> 199 200 <div id="winModify" style="display: none;"> 201 <table class="tb" style="height: 170px;"> 202 <tr class="tr"> 203 <td class="td">组织机构名称：</td> 204 <td> 205 <input id="txtModifyOrgName" type="text" /></td> 206 </tr> 207 <tr class="tr"> 208 <td class="td">组织机构编码: 209 </td> 210 <td> 211 <input id="txtModifyOrgCode" type="text" /> 212 </td> 213 214 </tr> 215 <tr class="tr"> 216 <td colspan="2"> 217 <button id="btnModifyConfirm" class="ui-button">确定</button> 218 <button id="btnModifyCancel" class="ui-button">取消</button> 219 </td> 220 </tr> 221 </table> 222 </div>
后端完整代码：
1 public class OrganizationController : Controller 2 { 3 // 4 // GET: /Organization/ 5 6 private IOrgRepository _orgRepository; 7 8 public OrganizationController(IOrgRepository orgRepository) 9 { 10 this._orgRepository = orgRepository; 11 } 12 13 public ActionResult Index() 14 { 15 return View(); 16 } 17 18 public JsonResult OrgDataSource() 19 { 20 var data = _orgRepository.GetOrgParentsNode().ToList(); 21 var result = GetOrgs(data); 22 return Json(new { Rows = result, Total = result.Count() }, JsonRequestBehavior.AllowGet); 23 } 24 25 [NonAction] 26 public List<dynamic> GetOrgs(IEnumerable<t_org> orgs) 27 { 28 var result = new List<dynamic>(); 29 30 foreach (var item in orgs) 31 { 32 var children = _orgRepository.GetOrgChildrenNodeByParentCode(item.orgcode).ToList(); 33 if (children == null || children.Count() == 0) 34 { 35 result.Add(new 36 { 37 name = item.name, 38 orgcode = item.orgcode, 39 parentCode = item.parentCode 40 }); 41 } 42 else 43 { 44 45 result.Add(new 46 { 47 name = item.name, 48 orgcode = item.orgcode, 49 parentCode = item.parentCode, 50 children = GetOrgs(children) 51 }); 52 } 53 } 54 return result; 55 } 56 57 public JsonResult ParentNode() 58 { 59 var data = _orgRepository.GetOrgAll().ToList(); 60 61 return Json(data, JsonRequestBehavior.AllowGet); 62 } 63 64 public JsonResult AddOrg(string parentNode, string orgName, string orgCode) 65 { 66 67 var check = _orgRepository.GetOrgBySpecifiedCondition(orgCode); 68 69 if (check.Count() > 1) 70 { 71 return Json(new { result = false, msg = "添加失败，已存在相同的组织结构名称或组织机构编码！" }, JsonRequestBehavior.AllowGet); 72 } 73 74 var org = new t_org() 75 { 76 parentCode = parentNode, 77 name = orgName, 78 orgcode = orgCode 79 }; 80 81 try 82 { 83 var result = _orgRepository.AddOrg(org); 84 if (result) 85 { 86 return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet); 87 } 88 else 89 { 90 return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet); 91 } 92 } 93 catch (Exception ex) 94 { 95 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet); 96 } 97 } 98 99 public JsonResult ModifyOrg(string orgName, string orgCode) { 100 101 var check = _orgRepository.GetOrgBySpecifiedCondition(orgCode); 102 103 if (check.Count() > 1) 104 { 105 return Json(new { result = false, msg = "修改失败，已存在相同的组织结构名称或组织机构编码！" }, JsonRequestBehavior.AllowGet); 106 } 107 108 var org = new t_org() 109 { 110 name = orgName, 111 orgcode = orgCode 112 }; 113 114 try 115 { 116 var result = _orgRepository.ModifyOrg(org); 117 if (result) 118 { 119 return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet); 120 } 121 else 122 { 123 return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet); 124 } 125 } 126 catch (Exception ex) 127 { 128 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet); 129 } 130 } 131 132 public JsonResult DeleteOrg(string orgCode) { 133 134 var org = new t_org() 135 { 136 orgcode = orgCode 137 }; 138 139 try 140 { 141 var result = _orgRepository.DeleteOrg(org); 142 if (result) 143 { 144 return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet); 145 } 146 else 147 { 148 return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet); 149 } 150 } 151 catch (Exception ex) 152 { 153 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet); 154 } 155 } 156 }