EXTtreeGrid分页

这个东西整了两天，关键在于要两个stroe，之所以要两个因为treestroe在分页的时候接受不了返回的总行数，不过有个问题就是第二页分页后显示在没有根节点的行层级显示不是那木明显；

------------------------------------------------------------------------------------------------我是帅气的分割线----------------------------------------------------------------------------------------------------------------------

var me = this;
//重新定义序号
Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, {
width: 40,
renderer: function (value, cellmeta, record, rowIndex, columnIndex, store) {
if (store.lastOptions.params != null) {
var pageindex = store.lastOptions.params.start;
return pageindex + rowIndex ;
} else {
return rowIndex ;
}
}
});

//定义列
me.gridCols = [
new Ext.grid.PageRowNumberer(),//重新定义 后一页是接前一页的序号
//{
// xtype: "rownumberer",
// text: "序号",
// width: 40
//},//序号循环
{
text: 'nid',
dataIndex: 'nid',
width: 200
},
{
xtype: 'treecolumn',
text: 'id',
dataIndex: 'id',
width: 200
},
{
text: 'Name', dataIndex: 'name',
width: 200
},
{
text: 'Sex', dataIndex: 'sex',
width: 200
},
{
text: 'Age', dataIndex: 'age',
width: 200
}
];

var itemsPerPage = 15;
//定义加载TreeStore
me.treeStore = Ext.create('Ext.data.TreeStore', {
fields: ['nid', 'id', 'name', 'sex', 'age'],
proxy: {
type: 'ajax',
url: YZSoft.$url('YZSoft.Services.REST/BPM/Process.ashx'),
extraParams: {
method: 'GetTreeGrid'
},
reader: {
root: 'children',
totalProperty: 'totalCount' // 一定需要这个参数接受后台返回的总条数
}
},
root: {
id: '0', //根路径
text: '0',
name: "0",
sex: "0",
age: "0",
expanded: true,
}
});

//定义分页Store
me.treeStore2 = Ext.create('Ext.data.JsonStore', {
autoLoad: true,
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
url: YZSoft.$url('YZSoft.Services.REST/BPM/Process.ashx'),
extraParams: {
method: 'GetTreeGrid'
},
reader: {
type: 'json',
root: 'children',
totalProperty: "totalCount"
}
},
fields: [{ name: "id" }, { name: "name" }, { name: "sex" }, { name: "age" }]
});
me.bbar = new Ext.PagingToolbar({
pageSize: itemsPerPage,
store: me.treeStore2,
displayInfo: true,
displayMsg: '显示第 {0} - {1}条记录 共{2}条记录',
displaySize: '5|10|15|20|all',
emptyMsg: "无记录",
listeners: {
change: function (obj, pdata, options) {
//翻页时重载treeStore的值
me.treeStore.load({
params: {
start: pdata.fromRecord,
page: pdata.currentPage,
limit: itemsPerPage
}
});
}
}
});

//定义的panel
me.treegrid = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 800,
height: 250,
useArrows: true,//使用Vista-style样式的箭头。
rootVisible: false,
autoScroll: true,
margin: false,
border: false,
animate: true, //动画效果
store: me.treeStore,
bbar: me.bbar,
columns: me.gridCols,
renderTo: Ext.getBody(),
});

后台cs页处理json数据，需要自己处理下返回的json数据，就是treegrid式的数据

public virtual JObject GetTreeGrid(HttpContext context)
{
YZRequest request = new YZRequest(context);
string parentid = request.GetString("node", "0");
int page = request.GetInt32("page", 1);
int start = request.GetInt32("start", 0);
int limit = request.GetInt32("limit", 15);
JObject rv = new JObject();

JArray items = new JArray();
rv["children"] = items;
string sqlpath = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["BPMEPDB"].ConnectionString;
DataTable dtparams = new DataTable();
dtparams.Columns.Add("parentid");
dtparams.Columns.Add("page");
dtparams.Columns.Add("start");
dtparams.Columns.Add("limit");
DataRow dr = dtparams.NewRow();
dr["parentid"] = parentid;
dr["page"] = page;
dr["start"] = start;
dr["limit"] = limit;

DataSet ds = SqlHelper.ExecuteDatasetTypedParams(sqlpath, "GetTreeGrid", dr);
rv["totalCount"] = Convert.ToInt32(ds.Tables[0].Rows[0][0].ToString());
// DataSet ds = SqlHelper.ExecuteDataset(sqlpath, CommandType.Text, sql);
this.GetTreeGridList3(items, ds.Tables[1]);
return rv;
}

//这里处理的思路就是读取第一条数据，看节点有没有子级，有的话递归查找，没有就直接拼接

protected virtual void GetTreeGridList3(JArray items, DataTable dt)
{
for (int i = 0; i < dt.Rows.Count;)
{
string ParentID = dt.Rows[i]["ID"].ToString();

DataRow[] drs = dt.Select("ParentID ='" + ParentID + "'");

if (drs.Length > 0)
{
GetTreeJSON(items, dt, dt.Rows[i]["ParentID"].ToString());
}
else
{
JObject item = new JObject();
items.Add(item);
item["leaf"] = true;
item["nid"] = dt.Rows[i]["NID"].ToString();
item["id"] = dt.Rows[i]["ID"].ToString();
item["name"] = dt.Rows[i]["Name"].ToString();
item["sex"] = dt.Rows[i]["Sex"].ToString();
item["age"] = dt.Rows[i]["Age"].ToString();
// item["expanded"] = true;
dt.Rows.RemoveAt(i);
}
}
}

public virtual void GetTreeJSON(JArray items, DataTable dt, string parentid)
{
DataRow[] drs = dt.Select("ParentID ='" + parentid + "'");
foreach (DataRow dr in drs)
{
parentid = dr["ID"].ToString();
JObject item = new JObject();
items.Add(item);

//根目录变个样子
DataRow[] drs2 = dt.Select("ParentID ='" + dr["ID"].ToString() + "'");

if (drs2.Length > 0)
{
item["leaf"] = false;
item["expanded"] = true;
}
else
{
item["leaf"] = true;
item["expanded"] = false;
}
item["nid"] = dr["NID"].ToString();
item["id"] = dr["ID"].ToString();
item["name"] = dr["Name"].ToString();
item["sex"] = dr["Sex"].ToString();
item["age"] = dr["Age"].ToString();

JArray children = new JArray();
item["children"] = children;
dt.Rows.Remove(dr);
this.GetTreeJSON(children, dt, parentid);
}
}

数据库：

查询语句：

ALTER PROCEDURE [dbo].[GetTreeGrid]
@ParentID NVARCHAR(500) ,
@page INT ,
@start INT ,
@limit INT
AS
BEGIN
;
WITH cte
AS ( SELECT ID ,
[Name] ,
[Sex] ,
[Age] ,
[ParentID] ,
Name AS NAME2
FROM [BPMEPDB].[dbo].[TreeGrid]
WHERE ParentID = @ParentID
UNION ALL
SELECT c.ID ,
c.Name ,
C.Sex ,
c.Age ,
c.ParentID ,
P.NAME AS NAME2
FROM cte P
INNER JOIN [BPMEPDB].[dbo].[TreeGrid] c ON p.ID = c.ParentID
)
SELECT ID ,
[Name] ,
[Sex] ,
[Age] ,
[ParentID] ,
NAME2
INTO #dt
FROM cte
SELECT COUNT(0)
FROM #dt;
SELECT NID ,
ID ,
[Name] ,
[Sex] ,
[Age] ,
[ParentID] ,
NAME2
FROM ( SELECT ROW_NUMBER() OVER ( ORDER BY ID ) AS NID ,
ID ,
[Name] ,
[Sex] ,
[Age] ,
[ParentID] ,
NAME2
FROM #dt
) AS a
WHERE
( @page - 1 ) * @limit < NID
AND @page * @limit >= NID
END

GO

效果图：