圖片：
針對tree：
數據庫：
CREATE TABLE [dbo].[SystemModel]( [Id] [int] IDENTITY(1,1) NOT NULL, [Name] [nvarchar](50) NULL, [FatherId] [int] NULL, [module_url] [nvarchar](100) NULL, [module_order] [nchar](10) NULL, CONSTRAINT [PK_SystemModel] PRIMARY KEY CLUSTERED ( [Id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY]
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid教程</title> <script src="Scripts/jquery.min.js" type="text/javascript"></script> <script src="Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script> <script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script> <link rel="Stylesheet" type="text/css" href="Styles/themes/icon.css" /> <link rel="Stylesheet" type="text/css" href="Styles/themes/default/easyui.css" /> <script type="text/javascript"> $(document).ready( function () { $("#QuestionList").datagrid( { title: "問卷列表", url: "Handler.ashx", columns: [[ { field: "Id", title: "編號", width: "100" }, { field: "Title", title: "題目", width: "200" }, { field: "Remark", title: "備注", width: "200" } ]], rownumbers: true, //行號 singleSelect: false, //是否單選 pagination: true//分頁控件 } ); var p = $('#QuestionList').datagrid('getPager'); $(p).pagination({ pageSize: 10, //每頁顯示的記錄條數，默認為10 pageList: [10, 20, 50], //可以設置每頁記錄條數的列表 beforePageText: '第', //頁數文本框前顯示的漢字 afterPageText: '頁 共 {pages} 頁', displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄' }); //針對tree $(".easyui-tree").tree({ onClick: function (node) { if ($('.easyui-tree').tree('isLeaf', node.target)) { alert('打開頁'); addTab(node.text, node.attributes); } } }); //下面針對search搜索框 $('#search').searchbox({ searcher: function (value, name) { $.post("add.ashx?type=search", { val: value }, function (result) { alert(result); $('#QuestionList').datagrid('loadData', result); }, 'json'); }, prompt: '請輸入值' }); //下面是針對easyui-dialog $("#QuestionInfo").dialog( { title: "問卷信息", width: '900', height: '600', iconCls: 'icon-edit', // href: 'QueationInfo.htm', modal: true, closed: true, buttons: [{ text: '保存', iconCls: 'icon-ok', handler: function () { $("#QInfo").form('submit', { url: url, onSubmit: function () { return $(this).form('validate'); }, success: function (result) { var result = eval('(' + result + ')'); if (result.errorMsg) { $.messager.show({ title: '錯誤信息', msg: result.errorMsg }); } else { $('#QuestionInfo').dialog('close'); $('#QuestionList').datagrid('reload'); } } }); } }, { text: '取消', iconCls: 'icon-cancel', handler: function () { $('#QuestionInfo').dialog('close'); } }] } ); } ); function Add() { $("#QuestionInfo").dialog("open"); url = 'Add.ashx?type=add'; } function edit() { var row = $('#QuestionList').datagrid('getSelected'); if (row) { $('#QuestionInfo').dialog('open').dialog('setTitle', '編輯'); $('#QInfo').form('load', row); url = 'Add.ashx?type=edit'; } else { alert('請選擇行'); } } function Del() { $.messager.confirm('確認', '你確認要刪除該記錄嗎？', function (r) { if (r) { var row = $('#QuestionList').datagrid('getSelected'); if (row) { url = 'Add.ashx?type=del&&Id=' + row.Id; $.post('Add.ashx?type=del', { Id: row.Id }, function (result) { if (result.status == 1) { $('#QuestionList').datagrid('reload'); } else { $.messager.alert('錯誤', result.msg, 'error'); } }, 'json' ); } else { alert('請選擇行'); } } }); } function addTab(title, url) { if ($('#tt').tabs('exists', title)) { $('#tt').tabs('select', title); } else { var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>'; $('#tt').tabs('add', { title: title, content: content, closable: true }); } } </script> </head> <body class="easyui-layout"> <div data-options="region:'north',border:false" style="height: 60px; background: #B3DFDA; padding: 10px"> north region</div> <div data-options="region:'west',split:true,title:'West'" style="width: 200px; padding: 10px;"> <ul class="easyui-tree" data-options="url:'Tree.ashx',method:'get',animate:true"> </ul> </div> <div data-options="region:'south',border:false" style="height: 50px; background: #A9FACD; padding: 10px;"> south region</div> <div data-options="region:'center'" id="tt" class="easyui-tabs"> <div title="Home"> <div id="toolbar"> <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="Add()"> 添加</a> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="edit()"> 編輯</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="Del()"> 刪除</a> <input id="search" /> </div> <table id="QuestionList"> </table> <div id="QuestionInfo"> <form id="QInfo" method="post"> <input type="hidden" name="Id" /> <p> 標題：<input id="Title" name="Title" /></p> <p> <!-- form取值針對的是name--> 備注：<input id="Remark" name="Remark" /></p> </form> </div> </div> </div> </body> </html>
后台tree獲取json
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Wzh.Model; using Wzh.BLL; using System.Text; namespace Web { /// <summary> /// Tree 的摘要說明 /// </summary> public class Tree : IHttpHandler { StringBuilder result = new StringBuilder(); StringBuilder sb = new StringBuilder(); public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; GetTreeJsonByList(new SystemModelBLL().GetModelList("1=1"),0); context.Response.Write(result.ToString()); context.Response.End(); } //根據List生成EasyUI Tree Json樹結構 public void GetTreeJsonByList(IList<SystemModelModel> Models, int Pid) { result.Append(sb.ToString()); sb.Clear(); //查詢所有字節點 IEnumerable<SystemModelModel> Infos = Models.Where(n => n.FatherId == Pid); if (Models.Count > 0) { sb.Append("["); if (Infos.Count() > 0) { foreach (var n in Infos) { sb.Append("{\"id\":\"" + n.Id + "\",\"text\":\"" + n.Name + "\",\"attributes\":\"" + n.module_url + "\""); IEnumerable<SystemModelModel> temp = Models.Where(p => p.FatherId == n.Id); if (temp.Count() > 0) { sb.Append(",\"state\":\"closed\",\"children\":"); GetTreeJsonByList(Models, n.Id); result.Append(sb.ToString()); sb.Clear(); } result.Append(sb.ToString()); sb.Clear(); sb.Append("},"); } sb = sb.Remove(sb.Length - 1, 1); } sb.Append("]"); result.Append(sb.ToString()); sb.Clear(); } } public bool IsReusable { get { return false; } } } }