KenDoTreeview刷新后展开的节点和选中的节点不变(KenDoTreeview中的数据通过KenDoGrid来进行保存、删除)
2017-02-13 10:54
537 查看
首先说明一下,KenDoTreeview只负责显示树,新增、修改、保存、删除数据均在KenDoGrid中进行,(如果是在KenDoTreeview中进行新增、修改、保存、删除操作的话,不需要这么复杂,KenDoTreeview本身就会保持展开选中节点不变),每次对KenDoGrid中的数据进行操作后要对KenDoTreeview进行更新数据,本身是不会保持刷新前的节点展开选中的状态,一般情况下都会要求树的展开选中状态不变。
js部分:先定义一个变量数组A,KenDoTreeview展开节点时触发expand事件,获得该节点的id(是唯一性标识即可)追加到数组A中;KenDoTreeview关闭节点时触发collapse事件,获得该节点的id(是唯一性标识即可)并在数组A中删除这个id。把该数组A传入后台。
Java部分:接收js传过来的数组A。查询好数据,通过for循环判断数组A中是否包含第i条数据中的id,如果是则设置expanded字段为true。刷新后展开的节点不变。
选中节点不变,可以只在js部分实现。首先定义一个变量b,KenDoTreeview在每次选中节点时触发select事件,获取该节点的id。刷新KenDoTreeview后,在transport的read()中,通过id获取该条数据的uid,根据uid选中该节点。
下面只显示部分代码
js部分:
Java部分代码:
js部分:先定义一个变量数组A,KenDoTreeview展开节点时触发expand事件,获得该节点的id(是唯一性标识即可)追加到数组A中;KenDoTreeview关闭节点时触发collapse事件,获得该节点的id(是唯一性标识即可)并在数组A中删除这个id。把该数组A传入后台。
Java部分:接收js传过来的数组A。查询好数据,通过for循环判断数组A中是否包含第i条数据中的id,如果是则设置expanded字段为true。刷新后展开的节点不变。
选中节点不变,可以只在js部分实现。首先定义一个变量b,KenDoTreeview在每次选中节点时触发select事件,获取该节点的id。刷新KenDoTreeview后,在transport的read()中,通过id获取该条数据的uid,根据uid选中该节点。
下面只显示部分代码
js部分:
<div id="treeview"></div> <script> var nodeValues,parantOrgId; function initTreeView () { $("#treeView").kendoTreeView({ template: "#=item.name# #=item.code#<input type='hidden' value='#=item.id#'/><input type='hidden' value='#=item.name#'/><input type='hidden' value='#=item.isManageGroup#'/>", dataSource: treeList, select: function (e) { parantOrgId = $(e.node).find("input:eq(0)").val(); $("#gridOrg").data("kendoGrid").dataSource.read(); expand: function(e){ nodeValues.push($(e.node).find("input:eq(0)").val()); }, collapse: function(e){ var value = $(e.node).find("input:eq(0)").val(); var index = nodeValues.indexOf(value); nodeValues.splice(index,1); } }); } var treeList = new kendo.data.HierarchicalDataSource({ transport: { read: function (options) { var info = new EiInfo(); info.set("nodeValues",nodeValues); (此处省略,这里是要跳转到后台Java中的).send("PublicOrganization", "queryTree", info, { onSuccess: function (info) { if (info.get("errorcode" === "-1")) { return; } var data = eval(info.get("treeJson")); options.success({data: data}); if(parantOrgId!=-1){ var treeview = $("#treeList").data("kendoTreeView"); var barDataItem = treeview.dataSource.get(parantOrgId); if(barDataItem!=undefined){ treeview.select(treeview.findByUid(barDataItem.uid));//选中节点不变 } } }, onFail: function (msg) { options.error(msg); } }); }, }, schema: { data: function(d){ return d.data; }, model: { id: "id", children: "items" } } }); </script>
Java部分代码:
String nodeValues = info.getString("nodeValues");//获取数组 if(nodeValues.indexOf(((Map)ds.get(i)).get("id").toString()) != -1){ ((Map)ds.get(i)).put("expanded", "true"); //展开节点不变 }
相关文章推荐
- 使用UltraWebTree时,如何在刷新后展开之前选中的节点,并绑定相关数据
- Ext tree或者gridl在选中数据并删除选中数据,刷新数据后任选中已删除数据问题解决
- treeview学习2之体验报告:绑定数据(递归算法),增加节点,删除节点
- asp.net treeview控件无刷新选择和删除节点(使用jquery)
- TreeView中选中+号的文字后折叠或展开子节点
- extjs学习笔记(六) grid中数据的保存,添加和删除
- TreeView保存当前节点展开状态
- asp.net treeview控件无刷新选择和删除节点的ajax方法
- 保存数据库中其他对象不变,删除数据库中所有数据的实现方法
- 我刚做的一个TreeView的CheckBox进行选中插入数据库,从数据库中读取数据后让CheckBox勾选的代码!
- JavaScript html js页面刷新之后下拉菜单选中值不变,在按钮提交后保存下拉列表中值不变
- javascript实现treeview无刷新添加和删除节点
- 保存数据库中其他对象不变,删除数据库中所有数据的实现方法
- 通过CommandBuilder对DataSet数据进行添加、修改、删除
- asp.net treeview控件无刷新选择和删除节点(使用jquery)
- 设置无刷新TreeView选中节点样式
- 怎么样避免treeview展开节点时刷新界面,而又可以执行selectedindexchanged事件
- extjs学习笔记(六) grid中数据的保存,添加和删除
- ASP.NET应用程序中TreeView 控件 即需填充 TreeNode 数据时,节点展开问题
- jquery treeview 展开指定节点,选中指定节点