asp.net 中用easyui中的treegird的簡單使用
幾乎每個‘數人頭’專案中都會用到的功能,這裡先記下來,以後直接到這裡複製程式碼就行了,ASP.NET MVC中的使用
資料庫使用者表中的除了有個parentid父級ID外,我還多加了以個欄位,parentpath,表示父級路徑,把該使用者的所有上級ID全都存起來,以,間隔,如使用者ID=5的低階路徑 為:,1,2,3,4, 最前面加多一個,是為了查詢該使用者的下級使用者總數方便
下面是HTML程式碼:
@{
ViewBag.Title = "推薦圖譜";
}
<link href="~/jquery-easyui-1.5.4.1/themes/default/easyui.css" rel="stylesheet" />
<link href="~/jquery-easyui-1.5.4.1/themes/icon.css" rel="stylesheet" />
<script src="~/jquery-easyui-1.5.4.1/jquery.min.js"></script>
<script src="~/jquery-easyui-1.5.4.1/jquery.easyui.min.js"></script>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">@ViewBag.Title</li>
</ul>
</div>
<table title="推薦圖譜" class="easyui-treegrid" style="width:700px;height:300px"
url="/Userinfo/TJTuPu_Ajax"
rownumbers="true"
idField="id" treeField="username">
<thead>
<tr>
<th field="username">使用者名稱</th>
<th field="regdate">註冊時間</th>
<th field="xjcount" >下級總數</th>
</tr>
</thead>
</table>
下面是相應的後臺程式碼:
//推薦圖譜-取資料
public ActionResult TJTuPu_Ajax(int? id)
{
ArrayList arr = new ArrayList();
if (id == null)
{
//取自己
Model.Userinfo u = base.GetLoginUser();
int xjcount = udal.CalcCount($"parentpath like '%,{u.id},%'");
string state = xjcount == 0 ? "open" : "closed";
arr.Add(new { id = u.id, username = u.username, regdate = u.createtime.ToString("yyyy-MM-dd"), xjcount = xjcount, state = state, });
}
else
{
//根據ID取下一級
List<Model.Userinfo> list_u = udal.GetListArray($"parentid={id.Value}");
foreach (var u in list_u)
{
int xjcount = udal.CalcCount($"parentpath like '%,{u.id},%'");
string state = xjcount == 0 ? "open" : "closed";
arr.Add(new { id = u.id, username = u.username, regdate = u.createtime.ToString("yyyy-MM-dd"), xjcount = xjcount, state = state, });
}
}
return Json(arr);
}
其實以上的程式碼都是直接從easyui官網上的demo裡複製出來的,我只是把他的後臺php示例程式碼改為了c#而已