本文内容
- 演示 TreePanel 勾选通过 DirectMethods 发送给服务器端方法
- 说明
- 修改记录
演示 TreePanel 勾选通过 DirectMethods 发送给服务器端方法
本文演示 Ext.Net 通过前台脚本操作页面后,如何将数据“直接”发送给服务器端方法,从而摆脱之前 ASP.NET 时代(非 Ajax)的思维模式。
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Assembly="Ext.Net.Utilities" Namespace="Ext.Net.Utilities" TagPrefix="ext" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Collections" %>
<!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 runat="server">
<title></title>
<script runat="server">
1:
2: protected void Page_Load(object sender, EventArgs e)
3: {
4: if (!X.IsAjaxRequest)
5: {
6: this.BindTreePanel(this.TreePanel1.Root);
7: }
8: }
9: [DirectMethod]
10: public string GetSelectedNodes(string nodes)
11: {
12: // TODO
13: return nodes;
14: }
15: private void BindTreePanel(Ext.Net.TreeNodeCollection nodes)
16: {
17: DataTable dataSource = ExtNetInteractive.DS.GetDataSource();
18:
19: Ext.Net.TreeNode root = new Ext.Net.TreeNode();
20: root.NodeID = "0";
21: root.Text = "Root";
22:
23: if (!dataSource.IsNull() && dataSource.Rows.Count > 0)
24: {
25: DataRow[] items = dataSource.Select("parentid='-1'");
26: if (items.Length > 0)
27: {
28: DataSet ds = new DataSet();
29: ds.Merge(items);
30: DataTable SourseTable = ds.Tables[0];
31:
32: for (int i = 0; i < SourseTable.Rows.Count; i++)
33: {
34: Ext.Net.TreeNode node = new Ext.Net.TreeNode();
35: node.NodeID = SourseTable.Rows[i]["id"].ToString();
36: node.Text = SourseTable.Rows[i]["name"].ToString();
37: node.Checked = Ext.Net.ThreeStateBool.False;
38: DataRow[] hasChild = dataSource.Select("parentid='" + SourseTable.Rows[i]["id"].ToString() + "'");
39: if (hasChild.Length > 0) node.Icon = Icon.FolderGo;
40: else node.Icon = Icon.Table;
41: if (hasChild.Length <= 0) node.Leaf = true;
42: else node.Leaf = false;
43:
44: root.Nodes.Add(node);
45: BindTreePanel(node.Nodes, dataSource, SourseTable.Rows[i]["id"].ToString());
46: }
47: }
48: }
49: nodes.Add(root);
50: }
51: private void BindTreePanel(Ext.Net.TreeNodeCollection nodes, DataTable allData, string parentID)
52: {
53: DataRow[] items = allData.Select("parentid='" + parentID + "'");
54:
55: if (items.Length > 0)
56: {
57: DataSet ds = new DataSet();
58: ds.Merge(items);
59: DataTable dt = ds.Tables[0];
60: for (int i = 0; i < dt.Rows.Count; i++)
61: {
62: Ext.Net.TreeNode node = new Ext.Net.TreeNode();
63: node.NodeID = dt.Rows[i]["id"].ToString();
64: node.Text = dt.Rows[i]["name"].ToString();
65: node.Checked = Ext.Net.ThreeStateBool.False;
66: DataRow[] hasChild = allData.Select("parentid='" + dt.Rows[i]["id"].ToString() + "'");
67: if (hasChild.Length > 0) node.Icon = Icon.FolderGo;
68: else node.Icon = Icon.Table;
69: if (hasChild.Length <= 0) node.Leaf = true;
70: else node.Leaf = false;
71:
72: nodes.Add(node);
73: BindTreePanel(node.Nodes, allData, dt.Rows[i]["id"].ToString());
74: }
75: }
76: }
77:
</
script
>
1:
2:
3: <script type="text/javascript" defer="defer">
4: var checkNodes = function(node, state) {
5: var tree = node.getOwnerTree();
6: tree.suspendEvents();
7: if (node.parentNode != null) {
8:
9: node.cascade(function(node) {
10: node.attributes.checked = state;
11: node.ui.toggleCheck(state);
12: return true;
13: });
14: var pNode = node.parentNode;
15: while (pNode.id != "0") {
16: if (state) {
17: pNode.ui.toggleCheck(state);
18: pNode.attributes.checked = state;
19: pNode = pNode.parentNode;
20: }
21: else {
22: var chk = false;
23: pNode.eachChild(function(child) {
24: if (child.attributes.checked || child.getUI().isChecked())
25: chk = true;
26: });
27: pNode.ui.toggleCheck(chk);
28: pNode.attributes.checked = chk;
29: pNode = pNode.parentNode;
30: }
31: }
32: }
33: tree.resumeEvents();
34: };
35:
36: var getSelectedNodes = function(tree) {
37: var msg = [],
38: selNodes = tree.getChecked();
39: Ext.each(selNodes, function(node) {
40: msg.push(node.text);
41: });
42: var selectedNodes = msg.join(",");
43: if (selectedNodes.length > 0) {
44: Ext.net.DirectMethods.GetSelectedNodes(selectedNodes, {
45: success: function(result) {
46: Ext.Msg.alert('信息', result);
47: },
48: failure: function(result) {
49: Ext.Msg.alert('信息', result);
50: }
51: });
52: }
53: else {
54: alert('未选择.');
55: }
56: };
57:
</
script
>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TreePanel ID="TreePanel1" runat="server" Icon="Accept" Height="300" Width="300"
RootVisible="false" UseArrows="true" AutoScroll="true" AutoDataBind="false">
<Root>
</Root>
<Listeners>
<CheckChange Handler="checkNodes(node,checked);" />
</Listeners>
<SelectionModel>
<ext:MultiSelectionModel ID="MultiSelectionModel1" runat="server">
</ext:MultiSelectionModel>
</SelectionModel>
</ext:TreePanel>
<ext:Button ID="Button1" runat="server" Text="获得勾选节点">
<Listeners>
<Click Handler="getSelectedNodes(#{TreePanel1});" />
</Listeners>
</ext:Button>
</form>
</body>
</html>
图1 TreePanel 勾选
图2 回调
说明
- 脚本函数 checkNodes 用于在客户端勾选树的节点;
- 脚本函数 getSelectedNodes 用于获得勾选的树的节点 text(也可以是id——node.id),并发送给服务器端;
- 服务器端方法 BindTreePanel 用于构造 TreePanel。
最开始,习惯于将客户端操作保存到页面的隐藏域,也就是说,针对这个例子,我们可以将勾选的节点 text保存到 Ext.Net.Hidden 里,然后在服务器端读取 hidden。如下所示:
var getSelectedNodes = function(tree, obj) {
var msg = [],
selNodes = tree.getChecked();
Ext.each(selNodes, function(node) {
msg.push(node.id);
});
obj.setValue(msg.join(",");
return true;
};
但这不是 Ext.Net 期望我们的实现方式,它期望我们,通过 Ext.net.DirectMethods 方法直接发送给服务器端方法。
修改记录
- 第一次 2012-4-28 [UPDATE]