您的位置：首页 > 其它

[Ext.Net] 1.2.0_Ext.Net.TreePanel 勾选“纠结”发送给服务器端的方法

2012-09-14 15:55 441 查看

Ext.Net1.2.0_Ext.Net.TreePanel勾选“纠结”发送给服务器端的方法

本文内容

演示TreePanel勾选通过DirectMethods发送给服务器端方法
说明
修改记录

演示TreePanel勾选通过DirectMethods发送给服务器端方法

本文演示Ext.Net通过前台脚本操作页面后，如何将数据“直接”发送给服务器端方法，从而摆脱之前ASP.NET时代（非Ajax）的思维模式。

[code]<%@PageLanguage="C#"%>


<%@RegisterAssembly="Ext.Net"Namespace="Ext.Net"TagPrefix="ext"%>

<%@RegisterAssembly="Ext.Net.Utilities"Namespace="Ext.Net.Utilities"TagPrefix="ext"%>

<%@ImportNamespace="System.Data"%>

<%@ImportNamespace="System.Collections"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title></title>


<scriptrunat="server">
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!X.IsAjaxRequest)
{
this.BindTreePanel(this.TreePanel1.Root);
}
}
[DirectMethod]
publicstringGetSelectedNodes(stringnodes)
{
//TODO
returnnodes;
}
privatevoidBindTreePanel(Ext.Net.TreeNodeCollectionnodes)
{
DataTabledataSource=ExtNetInteractive.DS.GetDataSource();
Ext.Net.TreeNoderoot=newExt.Net.TreeNode();
root.NodeID="0";
root.Text="Root";
if(!dataSource.IsNull()&&dataSource.Rows.Count>0)
{
DataRow[]items=dataSource.Select("parentid='-1'");
if(items.Length>0)
{
DataSetds=newDataSet();
ds.Merge(items);
DataTableSourseTable=ds.Tables[0];
for(inti=0;i<SourseTable.Rows.Count;i++)
{
Ext.Net.TreeNodenode=newExt.Net.TreeNode();
node.NodeID=SourseTable.Rows[i]["id"].ToString();
node.Text=SourseTable.Rows[i]["name"].ToString();
node.Checked=Ext.Net.ThreeStateBool.False;
DataRow[]hasChild=dataSource.Select("parentid='"+SourseTable.Rows[i]["id"].ToString()+"'");
if(hasChild.Length>0)node.Icon=Icon.FolderGo;
elsenode.Icon=Icon.Table;
if(hasChild.Length<=0)node.Leaf=true;
elsenode.Leaf=false;
root.Nodes.Add(node);
BindTreePanel(node.Nodes,dataSource,SourseTable.Rows[i]["id"].ToString());
}
}
}
nodes.Add(root);
}
privatevoidBindTreePanel(Ext.Net.TreeNodeCollectionnodes,DataTableallData,stringparentID)
{
DataRow[]items=allData.Select("parentid='"+parentID+"'");
if(items.Length>0)
{
DataSetds=newDataSet();
ds.Merge(items);
DataTabledt=ds.Tables[0];
for(inti=0;i<dt.Rows.Count;i++)
{
Ext.Net.TreeNodenode=newExt.Net.TreeNode();
node.NodeID=dt.Rows[i]["id"].ToString();
node.Text=dt.Rows[i]["name"].ToString();
node.Checked=Ext.Net.ThreeStateBool.False;
DataRow[]hasChild=allData.Select("parentid='"+dt.Rows[i]["id"].ToString()+"'");
if(hasChild.Length>0)node.Icon=Icon.FolderGo;
elsenode.Icon=Icon.Table;
if(hasChild.Length<=0)node.Leaf=true;
elsenode.Leaf=false;
nodes.Add(node);
BindTreePanel(node.Nodes,allData,dt.Rows[i]["id"].ToString());
}
}
}
</script>
<scripttype="text/javascript"defer="defer">
varcheckNodes=function(node,state){
vartree=node.getOwnerTree();
tree.suspendEvents();
if(node.parentNode!=null){
node.cascade(function(node){
node.attributes.checked=state;
node.ui.toggleCheck(state);
returntrue;
});
varpNode=node.parentNode;
while(pNode.id!="0"){
if(state){
pNode.ui.toggleCheck(state);
pNode.attributes.checked=state;
pNode=pNode.parentNode;
}
else{
varchk=false;
pNode.eachChild(function(child){
if(child.attributes.checked||child.getUI().isChecked())
chk=true;
});
pNode.ui.toggleCheck(chk);
pNode.attributes.checked=chk;
pNode=pNode.parentNode;
}
}
}
tree.resumeEvents();
};
vargetSelectedNodes=function(tree){
varmsg=[],
selNodes=tree.getChecked();
Ext.each(selNodes,function(node){
msg.push(node.text);
});
varselectedNodes=msg.join(",");
if(selectedNodes.length>0){
Ext.net.DirectMethods.GetSelectedNodes(selectedNodes,{
success:function(result){
Ext.Msg.alert('信息',result);
},
failure:function(result){
Ext.Msg.alert('信息',result);
}
});
}
else{
alert('未选择.');
}
};
</script>

</head>

<body>

<formid="form1"runat="server">

<ext:ResourceManagerID="ResourceManager1"runat="server"/>

<ext:TreePanelID="TreePanel1"runat="server"Icon="Accept"Height="300"Width="300"

RootVisible="false"UseArrows="true"AutoScroll="true"AutoDataBind="false">

<Root>

</Root>

<Listeners>

<CheckChangeHandler="checkNodes(node,checked);"/>

</Listeners>

<SelectionModel>

<ext:MultiSelectionModelID="MultiSelectionModel1"runat="server">

</ext:MultiSelectionModel>

</SelectionModel>

</ext:TreePanel>

<ext:ButtonID="Button1"runat="server"Text="获得勾选节点">

<Listeners>

<ClickHandler="getSelectedNodes(#{TreePanel1});"/>

</Listeners>

</ext:Button>

</form>

</body>

</html>

[/code]



图1TreePanel勾选





图2回调

说明
脚本函数checkNodes用于在客户端勾选树的节点；
脚本函数getSelectedNodes用于获得勾选的树的节点text（也可以是id——node.id），并发送给服务器端；
服务器端方法BindTreePanel用于构造TreePanel。

最开始，习惯于将客户端操作保存到页面的隐藏域，也就是说，针对这个例子，我们可以将勾选的节点text保存到Ext.Net.Hidden里，然后在服务器端读取hidden。如下所示：

vargetSelectedNodes=function(tree,obj){

varmsg=[],

selNodes=tree.getChecked();

Ext.each(selNodes,function(node){

msg.push(node.id);

});

obj.setValue(msg.join(",");

returntrue;

};


但这不是Ext.Net期望我们的实现方式，它期望我们，通过Ext.net.DirectMethods方法直接发送给服务器端方法。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航