最近做项目时遇到了TreePanel的无刷新问题。模块的要求是在为某个节点增加子节点的时候，要无刷新的添加进去，并保持此节点的展开状态。删除以及修改操作也一样。
我的处理方法是：在点击相关按钮后，比如点击添加按钮，先执行ajax方法在后台把信息添加至数据库，然后在前端判断方法是否成功，成功的话用js在树中添加相应节点。
废话不多说了，直接把代码奉献给大家
一：前端代码如下：
<head runat="server"> <title></title>
<script type="text/javascript">
function TreeNode_Click(node) {
Ext.net.DirectMethods.LoadData(node.id);
}
function TreePanel_Click(node)
{
txtPCatalogName.setValue(node.text);
hidPCatalogID.setValue(node.id);
}
var save = function()
{
Ext.net.DirectMethods.saveCatory({ success: function(result) {
if (result == true) {
var catoryID = hidCatalogID.getValue();
var catorytext = txtCatalogName.getValue();
Append(catoryID, catorytext);
}
}
});
}
var Append = function(nodeid, nodetext) {
var PCatoryId = hidPCatalogID.getValue();
var PNode = tplMain.getNodeById(PCatoryId);
var action = hidAction.getValue();
var NewNode = new Ext.tree.TreeNode({
id: nodeid,
text: nodetext,
icon: "images/left_data.gif",
listeners: {//监听
"click": function(node, e) {
Ext.net.DirectMethods.LoadData(node.id);
}
}
});
if (action == "0") {
PNode.appendChild(NewNode);
hidAction.setValue("1");
}
else {
var catoryId = hidCatalogID.getValue();
var node = tplMain.getNodeById(catoryId);
PNode.replaceChild(NewNode, node);
}
}
var DeleteCatory = function() {
Ext.net.DirectMethods.DeleteCatory({ success: function(result) {
if (result == true) {
var CatoryId = hidcurrentCataryID.getValue();
var node = tplMain.getNodeById(CatoryId);
if (node != null) { node.remove();
}
}
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:Hidden ID="hidPCatalogID" runat="server"></ext:Hidden>
<ext:Hidden ID="hidOrgID" runat="server"></ext:Hidden>
<ext:Hidden ID="hidCatalogID" runat="server"></ext:Hidden>
<ext:Hidden ID="hidcurrentCataryID" runat="server"></ext:Hidden>
<ext:Hidden ID="hidPCurrentCataryID" runat="server"></ext:Hidden>
<ext:Hidden ID="hidAction" runat="server"></ext:Hidden>
<ext:ViewPort ID="ViewPort1" runat="server">
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West Collapsible="true" Split="true" MarginsSummary="5 0 5 2">
<ext:TreePanel ID="tplMain" runat="server" Height="500" Width="350" UseArrows="true" AutoScroll="true" Animate="true" EnableDD="true" ContainerScroll="true"> <Listeners> <Click Handler="TreeNode_Click(node);" /> </Listeners> </ext:TreePanel> </West>
<Center MarginsSummary="5 0 5 1">
<ext:FormPanel ID="FormPanel1" runat="server" Title="Form Panel" Padding="5" ButtonAlign="Right">
<Items>
<ext:TextField ID="lblCatalogID" runat="server" AnchorHorizontal="60%" FieldLabel="分类编号"> </ext:TextField>
<ext:TextField ID="txtCatalogName" runat="server" AnchorHorizontal="60%" FieldLabel="分类名称"> </ext:TextField> <ext:TextArea ID="txtDesc" runat="server" AnchorHorizontal="60%" FieldLabel="分类描述"> </ext:TextArea>
<ext:TextField ID="txtPCatalogName" runat="server" AnchorHorizontal="60%" FieldLabel="上级分类">
<Listeners><Focus Handler="SelectPCatalog();" /></Listeners> </ext:TextField>
<ext:TextField ID="txtSortID" runat="server" AnchorHorizontal="60%" FieldLabel="分类排序ID"> </ext:TextField> <ext:TextField ID="txt1" runat="server"></ext:TextField></Items>
<Buttons>
<ext:Button ID="btnAdd" runat="server" Text="添加" Icon="Add"> <DirectEvents><Click OnEvent="BtnAdd_Click"></Click></DirectEvents>
</ext:Button>
<ext:Button ID="btnSave" runat="server" Text="保存" Icon="Accept"> <Listeners><Click Fn="save" /></Listeners> </ext:Button>
<ext:Button ID="btnDel" runat="server" Text="删除" Icon="Delete"> <Listeners><Click Fn="DeleteCatory" /></Listeners> </ext:Button> </Buttons> </ext:FormPanel> </Center> </ext:BorderLayout>
<ext:Window ID="winCatalog" Hidden="true" Title="选择上级分类" runat="server" X=500 Y=20 Height=500 Width=300 ButtonAlign=Center> <Content> <uc1:ctrcatalogtree id="ct_1" runat="server"/> </Content> <Buttons> <ext:Button ID="Button1" runat="server" Text="确定" Icon="Accept"><Listeners><Click Handler="#{winCatalog}.hide();" /></Listeners></ext:Button> </Buttons> </ext:Window></Content> </ext:ViewPort></form> </body> </html>
--以上是前端代码，由于每个公司的编程模式不一样，大家只做参考。增删改的操作的主要方法在save跟deletecatory方法当中。
下面贴出部分后台方法:
[DirectMethod] public string Submit() //原本是想通过此方法返回树的json数据局，然后重新绑定，但是会刷新无法把状态展开，所以弃用
{
Ext.Net.TreeNodeCollection nodes = InitTreePanel();
return nodes.ToJson();
}
private Ext.Net.TreeNodeCollection InitTreePanel()
{
long lngRootID = 1;
if (System.Configuration.ConfigurationSettings.AppSettings["SystemModel"] == "1")
{ //如果是租用的方式,只显示所在机构一层的部门树
lngRootID = long.Parse(Session["UserOrgID"].ToString()); }
if (Session["OldCatalogID"] != null)
{
lngCurrCatalogID = long.Parse(Session["OldCatalogID"].ToString());
}
OCatalogCollection cc = CatalogControl.GetAllCatalogCollection();
Ext.Net.TreeNode root = new Ext.Net.TreeNode();
if (cc.GetOCatalog(lngRootID) != null) //如果还没有为该机构添加根分类，则提示。
{
root.Text = cc.GetOCatalog(lngRootID).Name;
}
else
{
Response.Write("<script>alert('对不起还没有添加根分类，请联系管理员！');</script>");
return null;
}
root.NodeID = lngRootID.ToString();
root.IconFile = @"..\Images\catalog.ico";
root.Expanded = true; //root.Expanded = false;
AddSubCatalogs(ref root, cc, lngRootID);
tplMain.Root.Add(root);
return tplMain.Root;
}
private void AddSubCatalogs(ref Ext.Net.TreeNode root, OCatalogCollection cc, long lngID)
{
Ext.Net.TreeNode node = null;
int iPoint = 0;
string texts = "";
foreach (OCatalog c in cc)
{
if (c.ParentID == lngID && c.ID != c.ParentID)
{
//当限制显示当前部门时判断
if (c.ID != this.CurrCatalogID || this.LimitCurr == false)
{
node = new Ext.Net.TreeNode();
node.NodeID = c.ID.ToString();
node.Text = c.Name;
if (c.ParentID == 1)
{
node.Expanded = true;
}
else
{
node.Expanded = false;
}
node.IconFile = @"..\Images\left_data.gif";
AddSubCatalogs(ref node, cc, c.ID);
root.Nodes.Add(node);
iPoint++;
}
} }
}
由于每个公司的数据绑定方法不一样，大家请根据自己的情况进行树数据绑定。
[DirectMethod]
public void LoadData(long lngCatalogID) //点击节点后现在数据
{
//自己根据实际情况写代码
}
[DirectMethod]
public bool saveCatory()//保存节点，可添加或修改，成功返回true
{}
[DirectMethod]
public bool DeleteCatory()//删除节点，成功返回true
{}
2111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
