Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

原址:http://www.cnblogs.com/wendy_soft2008/archive/2009/07/10/1520718.html

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

2009-07-10 18:15 by key_sky, 编辑

     此例子为一工程的一个页面,通过devtreelist来展示数据表中的带上下级结构的结构,点击treelist来展示选中的treelist节点的相关子表数据。子表数据通过aspxgridview来展示,可以对子表数据进行数据维护。最后利用js来实现对子表数据的排序

      页面加载后的展示效果:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

    点击左边树状结构来异步实现子表相关数据展示:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

   点击gridview的数据操作列进行数据操作(使用覆盖效果,覆盖其他内容):

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

    点击排序列的序号进行排序:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

如果上述数据操作效果以及展示方式符合你的项目需求,那么可以尝试着看下整个页面的实现方式

引入dev的相关命名注册空间

aspx页:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

cs页面:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)Code
using DevExpress.Web.ASPxEditors;
using DevExpress.Web.ASPxTabControl;
using DevExpress.Web.ASPxTreeList;

第一步:左边组织树的实现:aspxtreelist的本质还是aspxgridview,但是在aspxtreelist的引入ParentID的概念来指定当前树节点的

上一级。例如中国(01)-北京(0101)-昌平(010106)。要用aspxtreelist来展示,那么各级的ParentID为中国(0)-北京(01)-

昌平(0101)。也就是在数据集中加入上级的ID。然后再将该程序集指定为aspxtreelist的数据源即可(当然在前台要设置ID和ParentID

对应的fieldname)。另外一种方法为一级一级的自主生成数。该实例即使用该方法。

aspx:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
</dxwtl:ASPxTreeList>
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

cs:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)        return node;
    }
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

这样我们就实现了aspxtreelist的数据装载,其中需要注意我们在前台页设置了以下属性以及参数来进行下一步的效果实现

1.AllowFocusedNode="True",设置树为可聚焦,主要实现通过聚焦来展示子表数据。

2.编写了两个客户端事件来实现展示子表数据以及相关样式设置也就是 <ClientSideEvents FocusedNodeChanged="function(s, e) {
 onFocusChanged(); }" Init="function(s, e) {devcbxgvwDetails.SetVisible(false);}"  />

其中OnFoucsChanged对应的js如下:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)function  onFocusChanged(){
    var key=treelist.GetFocusedNodeKey();
    devcbxgvwDetails.PerformCallback(key);
}
</script>
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

通过该脚本来通知aspxgridview按照选中的treelist的主键值来进行相应数据的回发。

第二步,通过编写的js脚本中的performcallback方法捎带的参数来进行aspxgridview子表数据的更新,更新通过aspxgridview的customcallback

来实现

aspx:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)          </asp:SqlDataSource>

CS页面CustomCallback接受参数进行异步刷新:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)        }
    }
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

其中为什么出现传过来的值进行了次是否包含逗号的判断,在最后再说明。

到此我们实现了aspxgridview跟随选择的treelist节点不同的异步更新。

第三步:aspxgridview自身的相关操作,主要有数据更新,删除,新建,克隆,分页,点击表头排序等功能

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)    }
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

我们为了实现在点击排序列的时候弹出一个层来,来进行排序,编写一js

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)Code
function OnOrderClick(element) {
        devpopupcOrder.ShowAtElement(element);
        devcbpnlOrder.PerformCallback();
}   

第四步:通过点击排序弹出的对话框我们进行排序,并且在点击更新后,我们需要将aspxgridview进行更新,于是我们在刚刚的

customcallback事件中进行了区分,来区分gridview的更新时来来自treelist还是来自排序。对于排序时用Js来实现的

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

至此整个页面代码编写完毕。我自己的dev控件相关的使用经验的文章编写也基本到这了。当然还有其他的一些的零碎功能无法说明

清楚,欢迎大家联系我一起进行交流。

 

     此例子为一工程的一个页面,通过devtreelist来展示数据表中的带上下级结构的结构,点击treelist来展示选中的treelist节点的相关子表数据。子表数据通过aspxgridview来展示,可以对子表数据进行数据维护。最后利用js来实现对子表数据的排序

      页面加载后的展示效果:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

    点击左边树状结构来异步实现子表相关数据展示:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

   点击gridview的数据操作列进行数据操作(使用覆盖效果,覆盖其他内容):

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

    点击排序列的序号进行排序:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

如果上述数据操作效果以及展示方式符合你的项目需求,那么可以尝试着看下整个页面的实现方式

引入dev的相关命名注册空间

aspx页:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

cs页面:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)Code
using DevExpress.Web.ASPxEditors;
using DevExpress.Web.ASPxTabControl;
using DevExpress.Web.ASPxTreeList;

第一步:左边组织树的实现:aspxtreelist的本质还是aspxgridview,但是在aspxtreelist的引入ParentID的概念来指定当前树节点的

上一级。例如中国(01)-北京(0101)-昌平(010106)。要用aspxtreelist来展示,那么各级的ParentID为中国(0)-北京(01)-

昌平(0101)。也就是在数据集中加入上级的ID。然后再将该程序集指定为aspxtreelist的数据源即可(当然在前台要设置ID和ParentID

对应的fieldname)。另外一种方法为一级一级的自主生成数。该实例即使用该方法。

aspx:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
</dxwtl:ASPxTreeList>
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

cs:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)        return node;
    }
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

这样我们就实现了aspxtreelist的数据装载,其中需要注意我们在前台页设置了以下属性以及参数来进行下一步的效果实现

1.AllowFocusedNode="True",设置树为可聚焦,主要实现通过聚焦来展示子表数据。

2.编写了两个客户端事件来实现展示子表数据以及相关样式设置也就是 <ClientSideEvents FocusedNodeChanged="function(s, e) {
 onFocusChanged(); }" Init="function(s, e) {devcbxgvwDetails.SetVisible(false);}"  />

其中OnFoucsChanged对应的js如下:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)function  onFocusChanged(){
    var key=treelist.GetFocusedNodeKey();
    devcbxgvwDetails.PerformCallback(key);
}
</script>
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

通过该脚本来通知aspxgridview按照选中的treelist的主键值来进行相应数据的回发。

第二步,通过编写的js脚本中的performcallback方法捎带的参数来进行aspxgridview子表数据的更新,更新通过aspxgridview的customcallback

来实现

aspx:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)          </asp:SqlDataSource>

CS页面CustomCallback接受参数进行异步刷新:

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)        }
    }
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

其中为什么出现传过来的值进行了次是否包含逗号的判断,在最后再说明。

到此我们实现了aspxgridview跟随选择的treelist节点不同的异步更新。

第三步:aspxgridview自身的相关操作,主要有数据更新,删除,新建,克隆,分页,点击表头排序等功能

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)    }
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

我们为了实现在点击排序列的时候弹出一个层来,来进行排序,编写一js

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)Code
function OnOrderClick(element) {
        devpopupcOrder.ShowAtElement(element);
        devcbpnlOrder.PerformCallback();
}   

第四步:通过点击排序弹出的对话框我们进行排序,并且在点击更新后,我们需要将aspxgridview进行更新,于是我们在刚刚的

customcallback事件中进行了区分,来区分gridview的更新时来来自treelist还是来自排序。对于排序时用Js来实现的

Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)

至此整个页面代码编写完毕。我自己的dev控件相关的使用经验的文章编写也基本到这了。当然还有其他的一些的零碎功能无法说明

清楚,欢迎大家联系我一起进行交流。

 

相关推荐