先上图，再看代码。组织结构界面
组织结构添加:
组织结构修改：
组织结构删除：
我在做这个页面的时候treegrid 的远程数据加载让我很头痛，从LigerUI官网提供的Demo来看，它是根据json数据格式中的children来判断是否在前面显示展开按钮，官网提供的数据格式如下：
var TreeDeptData = {
Rows: [
{
id: '', name: "企划部", remark: "1989-01-12",
children: [
{
id: '', name: "企划分部一", remark: "企划分部一"
},
{
id: '', name: "企划分部二", remark: "企划分部二", children:
[
{ id: '', name: "企划分部二 A组", remark: "企划分部二 A组" },
{ id: '', name: "企划分部二 B组", remark: "企划分部二 B组" }
]
},
{ id: '', name: "企划分部三", remark: "企划分部三" }
]
},
{ id: '', name: "研发部", remark: "研发部" },
{ id: '', name: "产品部", remark: "产品部" }
]
};从数据格式可以看出，当这一项有子节点的时候，才有children属性，但我们后台绑定数据的时候，通常返回的是一个model，所以有无子节点的数据都会有children属性，而treegrid在展示的时候，它是根据children属性来判断的，即有children，就显示展开按钮，所以界面显示的时候就会有点不伦不类.但没关系，自从我们有了dynamic 后，很多问题都解决了:)
[NonAction]
public List<dynamic> GetOrgs(IEnumerable<t_org> orgs)
{
var result = new List<dynamic>(); foreach (var item in orgs)
{
var children = _orgRepository.GetOrgChildrenNodeByParentCode(item.orgcode).ToList();
if (children == null || children.Count() == )
{
result.Add(new
{
name = item.name,
orgcode = item.orgcode,
parentCode = item.parentCode
});
}
else
{ result.Add(new
{
name = item.name,
orgcode = item.orgcode,
parentCode = item.parentCode,
children = GetOrgs(children)
});
}
}
return result;
}
前端完整代码：
@section headerScripts{
<style type="text/css">
#grid {
margin-left: 10px;
margin-top: 10px;
}
</style>
<script type="text/javascript">
var UrlOrgDataSource = '@Url.Action("OrgDataSource")';
var UrlParentNode = '@Url.Action("ParentNode")';
var UrlAddOrg = '@Url.Action("AddOrg")';
var UrlModifyOrg = '@Url.Action("ModifyOrg")';
var UrlDeleteOrg = '@Url.Action("DeleteOrg")';
$(function () {
$("#grid").ligerGrid({
columns: [
{ display: '组织结构名称', name: 'name', id:'tree1', align: 'left', width:'30%' },
{ display: '组织结构编码', name: 'orgcode', align: 'left',width:'30%' }
],
width: '98%',
pageSizeOptions: [, , ],
height: '97%',
url: UrlOrgDataSource,
alternatingRow: true,
rowHeight: ,
headerRowHeight: ,
tree: { columnId: 'tree1' },
toolbar: {
items: [
{ text: '增加', click: AddOrg, img: '@Url.Content("~/Content/LigerUI/icons/add.gif")' },
{ line: true },
{ text: '修改', click: ModifyOrg, img:'@Url.Content("~/Content/LigerUI/icons/modify.gif")' },
{ line: true },
{ text: '删除', click: DeleteOrg, img: '@Url.Content("~/Content/LigerUI/icons/delete.gif")' }
]
}
}
);
function AddOrg() {
if (!window.addWin) {
window.addWin = $.ligerDialog.open({
target: $("#winAdd"),
height: ,
width: ,
title: "增加组织机构"
});
$("#txtParentCode").ligerComboBox(
{
url: UrlParentNode,
valueField: 'orgcode',
textField: 'name',
selectBoxWidth: ,
autocomplete: true,
width: ,
hideOnLoseFocus: true,
css: 'combo'
}
);
$("#btnCancel").click(function () {
window.addWin.hide();
});
$("#btnConfirm").click(function () {
var parentNode = $("#txtParentCode").ligerComboBox().getValue();
var orgName = $("#txtOrgName").val();
var orgCode = $("#txtOrgCode").val();
if (orgName == "" || orgCode == "") {
alert("组织机构名称和组织机构编码不能为空！");
return;
}
$.post(UrlAddOrg,
{ parentNode: parentNode, orgName: orgName, orgCode: orgCode},
function (data) {
if (data.result) {
alert("操作成功！");
$("#grid").ligerGrid().reload();
} else {
alert(data.msg);
}
});
});
} else {
window.addWin.show();
}
}
function ModifyOrg() {
var ModifyDialog;
var grid = $("#grid").ligerGrid();
var row = grid.getSelectedRow();
if (row == null) {
alert("请选择一条数据");
return;
}
$("#winModify").data("orgName", row.name);
$("#winModify").data("orgCode", row.orgcode);
if (!window.modifyWin) {
window.modifyWin = $.ligerDialog.open({
target: $("#winModify"),
height: ,
width: ,
title: "修改组织机构"
});
$("#txtModifyOrgName").val($("#winModify").data("orgName"));
$("#txtModifyOrgCode").val($("#winModify").data("orgCode"));
$("#btnModifyCancel").click(function () {
window.modifyWin.hide();
});
$("#btnModifyConfirm").click(function () {
var orgName = $("#txtModifyOrgName").val();
var orgCode = $("#txtModifyOrgCode").val();
if (orgName == "" || orgCode == "") {
alert("组织机构名称和组织机构编码不能为空");
return;
}
$.post(UrlModifyOrg, { orgName: orgName, orgCode: orgCode }, function (data) {
if (data.result) {
alert("操作成功！");
$("#grid").ligerGrid().reload();
} else {
alert(data.msg);
}
});
});
} else {
$("#winModify").data("OrgName", row.name);
$("#winModify").data("orgCode", row.orgcode);
window.modifyWin.show();
}
}
function DeleteOrg() {
var grid = $("#grid").ligerGrid();
var row = grid.getSelectedRow();
if (row == null) {
alert("请选择一条数据");
return;
}
if (confirm("是否确定删除？")) {
$.post(UrlDeleteOrg, { orgCode: row.orgcode }, function (data) {
if (data.result) {
alert("删除成功！");
$("#grid").ligerGrid().reload();
} else {
alert(data.msg);
}
});
}
}
});
</script>
}
<div id="grid"></div>
<div id="winAdd" style="display: none;">
<table class="tb" style="height: 170px;">
<tr class="tr">
<td class="td">父级：</td>
<td style="padding-right:45px;">
<input id="txtParentCode" /></td>
</tr>
<tr class="tr">
<td class="td">组织机构名称：</td>
<td>
<input id="txtOrgName" type="text" /></td>
</tr>
<tr class="tr">
<td class="td">组织机构编码：
</td>
<td>
<input id="txtOrgCode" type="text" />
</td>
</tr>
<tr class="tr">
<td colspan="">
<button id="btnConfirm" class="ui-button">确定</button>
<button id="btnCancel" class="ui-button">取消</button>
</td>
</tr>
</table>
</div>
<div id="winModify" style="display: none;">
<table class="tb" style="height: 170px;">
<tr class="tr">
<td class="td">组织机构名称：</td>
<td>
<input id="txtModifyOrgName" type="text" /></td>
</tr>
<tr class="tr">
<td class="td">组织机构编码:
</td>
<td>
<input id="txtModifyOrgCode" type="text" />
</td>
</tr>
<tr class="tr">
<td colspan="">
<button id="btnModifyConfirm" class="ui-button">确定</button>
<button id="btnModifyCancel" class="ui-button">取消</button>
</td>
</tr>
</table>
</div>后端完整代码：
public class OrganizationController : Controller
{
//
// GET: /Organization/ private IOrgRepository _orgRepository; public OrganizationController(IOrgRepository orgRepository)
{
this._orgRepository = orgRepository;
} public ActionResult Index()
{
return View();
} public JsonResult OrgDataSource()
{
var data = _orgRepository.GetOrgParentsNode().ToList();
var result = GetOrgs(data);
return Json(new { Rows = result, Total = result.Count() }, JsonRequestBehavior.AllowGet);
} [NonAction]
public List<dynamic> GetOrgs(IEnumerable<t_org> orgs)
{
var result = new List<dynamic>(); foreach (var item in orgs)
{
var children = _orgRepository.GetOrgChildrenNodeByParentCode(item.orgcode).ToList();
if (children == null || children.Count() == )
{
result.Add(new
{
name = item.name,
orgcode = item.orgcode,
parentCode = item.parentCode
});
}
else
{ result.Add(new
{
name = item.name,
orgcode = item.orgcode,
parentCode = item.parentCode,
children = GetOrgs(children)
});
}
}
return result;
} public JsonResult ParentNode()
{
var data = _orgRepository.GetOrgAll().ToList(); return Json(data, JsonRequestBehavior.AllowGet);
} public JsonResult AddOrg(string parentNode, string orgName, string orgCode)
{ var check = _orgRepository.GetOrgBySpecifiedCondition(orgCode); if (check.Count() > )
{
return Json(new { result = false, msg = "添加失败，已存在相同的组织结构名称或组织机构编码！" }, JsonRequestBehavior.AllowGet);
} var org = new t_org()
{
parentCode = parentNode,
name = orgName,
orgcode = orgCode
}; try
{
var result = _orgRepository.AddOrg(org);
if (result)
{
return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
}
else
{
return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
}
} public JsonResult ModifyOrg(string orgName, string orgCode) { var check = _orgRepository.GetOrgBySpecifiedCondition(orgCode); if (check.Count() > )
{
return Json(new { result = false, msg = "修改失败，已存在相同的组织结构名称或组织机构编码！" }, JsonRequestBehavior.AllowGet);
} var org = new t_org()
{
name = orgName,
orgcode = orgCode
}; try
{
var result = _orgRepository.ModifyOrg(org);
if (result)
{
return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
}
else
{
return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
}
} public JsonResult DeleteOrg(string orgCode) { var org = new t_org()
{
orgcode = orgCode
}; try
{
var result = _orgRepository.DeleteOrg(org);
if (result)
{
return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
}
else
{
return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
}
}
}