设为首页收藏本站

jQuery MiniUI

 找回密码
 立即注册
jQuery MiniUI › 论坛 › MiniUI › 技术交流 › 关于TreeGrid中嵌套treeselect的问题
12下一页
返回列表 发新帖
查看: 12883|回复: 17
打印 上一主题 下一主题

关于TreeGrid中嵌套treeselect的问题 [复制链接]

yy0033

Rank: 3Rank: 3
跳转到指定楼层
楼主
发表于 2014-1-3 11:57:38 |只看该作者 |倒序浏览

功能目的： 编辑后台模块，同时给模块指定拥有权限的部门。
使用控件： 使用TreeGrid中，再绑定一个<input property="editor" class="mini-treeselect"......>
出现的问题：
第1步 选择部门列表正常

第2步 问题1出现：离开部门列表，绑定的脚是value值。我希望显示的是text.  
当整个TreeGrid提交POST时，希望数据库保存的是Jsons格式:{"id":"value","Name":"text"}

第3步 问题2出现：重新加载页面， 再次编辑部门列表，发现初始化时总有一个被漏选。


初次接触MiniUI，不知道是不是我没找对方法 ，请各位大侠帮我解析一下。 多谢了。

附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

举报

yy0033

Rank: 3Rank: 3
沙发
发表于 2014-1-3 13:11:36 |只看该作者
怎么没有人解答呢？  

如果这个不好处理的话， 有其它办法达到同样的目的也是可以的， 麻烦大神指点下哦。

举报

factory

Rank: 8Rank: 8
板凳
发表于 2014-1-3 13:29:19 |只看该作者
yy0033 发表于 2014-1-3 13:11
怎么没有人解答呢？  

如果这个不好处理的话， 有其它办法达到同样的目的也是可以的， 麻烦大神指点下哦。 ...

列这样设置

<div field="yourField" displayField="aaa(任意取名)">部门权限</div>

试试

举报

yy0033

Rank: 3Rank: 3
地板
发表于 2014-1-3 13:52:24 |只看该作者
本帖最后由 yy0033 于 2014-1-3 13:57 编辑
factory 发表于 2014-1-3 13:29
列这样设置

部门权限

非常感谢大神， 用你的办法显示问题解决了。
还有两个问题麻烦指教下，
1. 由于默认保存到数据库的是以逗号分隔value值，当重新加载页面时，却无法显示text文本内容了。

2. 重新加载页面后， 部门树菜单依然存在有些节点未被选中， 但实际上value值里存在。


附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

举报

yy0033

Rank: 3Rank: 3
5#
发表于 2014-1-3 14:00:46 |只看该作者
这是我写的代码。  请大神指点。
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <link href="/scripts/miniUI.css" rel="stylesheet" />
  7.     <script src="/scripts/boot.js"></script>
  8.     <link href="/scripts/miniui/themes/blue/skin.css" rel="stylesheet" />
  9. </head>
  10. <body>
  11.     <input type="button" value="插入节点(前)" onclick="onAddBefore()" />
  12.     <input type="button" value="插入节点(后)" onclick="onAddAfter()" />
  13.     <input type="button" value="插入节点(子节点)" onclick="onAddNode()"/>
  14.    
  15.     <!--<input type="button" value="编辑节点" onclick="onEditNode()" />-->
  16.     <input type="button" value="删除节点" onclick="onRemoveNode()" />
  17.     <input type="button" value="保存" onclick="EventSaveData()" style="margin-left: 30px; font-weight: bold;" />
  18.     <!--<input property="editor" class="mini-treeselect" multiselect="true" value="" text="" textfield="DepartmentName" valuefield="fid" parentfield="pid" checkrecursive="true" showfoldercheckbox="false" expandonload="true" showclose="true" oncloseclick="onCloseClick" popupwidth="200" url="/Control/api.ashx?method=QueryCollDepartmentInfo" />-->
  19.     <h3></h3>
  20.     <div id="tree1" class="mini-treegrid" url="/Control/api.ashx?method=QueryCollModelInfo" style="width: 1500px; padding: 5px;height:auto;"
  21.          showtreeicon="true" idfield="fid" parentfield="pid" resultastree="false" showtreeicon="true"
  22.          allowdrag="true" allowdrop="true" allowleafdropin="true" expandonnodeclick="false" treecolumn="taskname" allowresize="true" allowcellselect="true" allowcelledit="true" oncellvalidation="onCellValidation">

  24.         <div property="columns">
  25.             <div type="indexcolumn"></div>
  26.             <div field="fid" width="100">编号<input class="mini-textbox" style="width:100%;" /></div>
  27.             <div name="taskname" field="ModelName" width="220">模块名称<input property="editor" class="mini-textbox" style="width:100%;" /></div>
  28.             <div field="ModelUrl" width="300px;">链接地址<input property="editor" class="mini-textbox" style="width:100%;" /></div>

  30.             <div field="ListPowerDepartmentID" width="100" displayfield="DepartmentName" >
  31.                 部门权限
  32.                 <input property="editor" class="mini-treeselect" multiselect="true" value="" text="" textfield="DepartmentName" valuefield="fid" parentfield="pid" checkrecursive="true" showfoldercheckbox="true" expandonload="false" showclose="true" oncloseclick="onCloseClick" popupwidth="200" url="/Control/api.ashx?method=QueryCollDepartmentInfo" />
  33.             </div>

  35.             <div field="ListPowerUser" width="100%">员工权限<input property="editor" class="mini-textbox" style="width:100%;" /></div>
  36.             <div field="LanguageID" width="100px;">语言包ID<input property="editor" class="mini-textbox" style="width:100%;" /></div>
  37.             <div field="RemarkInfo" width="300px;">备注<input property="editor" class="mini-textarea" style="width:100%;" /></div>
  38.         </div>
  39.     </div>

  41.     <script type="text/javascript">

  43.         function onAddBefore(e) {
  44.             var tree = mini.get("tree1");
  45.             var node = tree.getSelectedNode();

  47.             var newNode = {};
  48.             tree.addNode(newNode, "before", node);
  49.         }
  50.         function onAddAfter(e) {
  51.             var tree = mini.get("tree1");
  52.             var node = tree.getSelectedNode();            
  53.             var newNode = {};
  54.             tree.addNode(newNode, "after", node);
  55.         }
  56.         function onAddNode(e) {
  57.             var tree = mini.get("tree1");
  58.             var node = tree.getSelectedNode();

  60.             var newNode = {};
  61.             tree.addNode(newNode, "add", node);
  62.         }
  63.         function onEditNode(e) {
  64.             var tree = mini.get("tree1");
  65.             var node = tree.getSelectedNode();

  67.             tree.beginEdit(node);
  68.         }
  69.         function onRemoveNode(e) {

  71.             var tree = mini.get("tree1");
  72.             var node = tree.getSelectedNode();

  74.             if (node) {
  75.                 if (confirm("确定删除选中节点?")) {
  76.                     tree.removeNode(node);
  77.                     EventRemoveNode(node);
  78.                 }
  79.             }
  80.         }
  81.         function onMoveNode(e) {
  82.             var tree = mini.get("tree1");
  83.             var node = tree.getSelectedNode();

  85.             alert("moveNode");
  86.         }
  87.         function EventSaveData() {
  88.             var tree = mini.get("tree1");
  89.             var data = tree.getData();
  90.             var json = mini.encode(data);
  91.             var msgid = mini.loading("数据保存中，请稍后......", "保存数据");

  93.             $.ajax({
  94.                 url: "/Control/api.ashx?method=InsertCollModeInfo",
  95.                 data: { data: json },
  96.                 type: "post",
  97.                 success: function (text) {
  98.                     mini.hideMessageBox(msgid);
  99.                     tree.load("/Control/api.ashx?method=QueryCollModelInfo");
  100.                 },
  101.                 error: function (jqXHR, textStatus, errorThrown) {
  102.                     alert(jqXHR.responseText);
  103.                 }
  104.             });
  105.         }

  107.         function EventRemoveNode(node)
  108.         {
  109.             var tree = mini.get("tree1");
  110.             var json = node.length <= 0 ? null : mini.encode(node);            
  111.             var msgid = mini.loading("数据删除中，请稍后......", "删除数据");

  113.             $.ajax({
  114.                 url: "/Control/api.ashx?method=DeleteCollModeInfo",
  115.                 data: { data: json },
  116.                 type: "post",
  117.                 success: function (text) {
  118.                     mini.hideMessageBox(msgid);
  119.                 },
  120.                 error: function (jqXHR, textStatus, errorThrown) {
  121.                     alert(jqXHR.responseText);
  122.                 }
  123.             });
  124.         }

  126.         function onCloseClick(e) {
  127.             var obj = e.sender;
  128.             obj.setText("");
  129.             obj.setValue("");
  130.         }


  133.         function ondrawcell(e)
  134.         {
  135.             var tree = e.sender;
  136.             var node = e.node;
  137.             
  138.             if (e.field == 'ListPowerDepartmentID') {
  139.                 e.cellHtml = "12321321";
  140.             }
  141.         }
  142.     </script>

  144. </body>
  145. </html>
复制代码

举报

factory

Rank: 8Rank: 8
6#
发表于 2014-1-3 14:30:20 |只看该作者
yy0033 发表于 2014-1-3 14:00
这是我写的代码。  请大神指点。

你应该是这样,你加上displayField="DepartmentName" ,getChanges()获取出来的行数据,内部其实是给你加上了这个DepartmentName字段了,所以你最好把DepartmentName也保存到数据库

因为你这个的值是逗号分隔的,跟单选的combobox还不太一样,你应该提供的数据是这样
{id:"1", ListPowerDepartmentID:"xxxx",DepartmentName:"文本"}
然后field="ListPowerDepartmentID"  displayField="DepartmentName",这样treegrid才只知道你的显示文本是什么

举报

yy0033

Rank: 3Rank: 3
7#
发表于 2014-1-3 14:47:15 |只看该作者
factory 发表于 2014-1-3 14:30
你应该是这样,你加上displayField="DepartmentName" ,getChanges()获取出来的行数据,内部其实是给你加上 ...

在哪儿触发getChanges()， 是Mini的涵数吗？
如果提供的数据必需是{id:"1", ListPowerDepartmentID:"xxxx",DepartmentName:"文本"}， 那么保存到数据库的就不应该是逗号分隔了， 而是这个JSON格式。   请问这个要怎么实现呀？
能否写一个简单的DEMO看看呢。

举报

factory

Rank: 8Rank: 8
8#
发表于 2014-1-3 14:52:40 |只看该作者
本帖最后由 factory 于 2014-1-3 14:53 编辑
yy0033 发表于 2014-1-3 14:47
在哪儿触发getChanges()， 是Mini的涵数吗？
如果提供的数据必需是{id:"1", ListPowerDepartmentID:"xxxx ...

我就是用getChanges()举个获取行对象的例子.
反正只要你的列上有displayFiled, 那么只要当你修改完数据之后,原本的数据中,就自动会给你加上displayField的字段值
比如你原来数据是{id:"1",name:"2"}

你的列是field ="name" displayField = "sssss"
那么你编辑完name这一列之后,你的数据自然而然会增加为 {id:"1",name:"2",sssss:"文本"}
你把sssss也可以保存到数据库,下次读取的时候,我们就能从sssss上知道你的name这一列的文本显示displayField="sssss"应该是什么文本了

举报

yy0033

Rank: 3Rank: 3
9#
发表于 2014-1-3 16:06:35 |只看该作者
本帖最后由 yy0033 于 2014-1-3 16:10 编辑
factory 发表于 2014-1-3 14:52
我就是用getChanges()举个获取行对象的例子.
反正只要你的列上有displayFiled, 那么只要当你修改完数据之 ...

折腾了一个小时，还是没太明白。
应该在哪儿触发getChanges()事件呢？
  1. <div id="tree1" class="mini-treegrid" url="/Control/api.ashx?method=QueryCollModelInfo" style="width: 1500px; padding: 5px;height:auto;"
  2.          showtreeicon="true" idfield="fid" parentfield="pid" resultastree="false" showtreeicon="true" ondrawcell="onDrawCell"
  3.          allowdrag="true" allowdrop="true" allowleafdropin="true" expandonnodeclick="false" treecolumn="taskname" allowresize="true" allowcellselect="true" allowcelledit="true" oncellvalidation="onCellValidation">

  5.         <div property="columns">
  6.             <div type="indexcolumn"></div>
  7.             <div field="fid" width="100">编号<input class="mini-textbox" style="width:100%;" /></div>
  8.             <div name="taskname" field="ModelName" width="220">模块名称<input property="editor" class="mini-textbox" style="width:100%;" /></div>
  9.             <div field="ModelUrl" width="300px;">链接地址<input property="editor" class="mini-textbox" style="width:100%;" /></div>

  11.             <div field="ListPowerDepartmentID" width="100" displayfield="DepartmentName">
  12.                 部门权限
  13.                 <input property="editor" class="mini-treeselect" multiselect="true" value="" text="" textfield="DepartmentName" valuefield="fid" parentfield="pid" checkrecursive="true" showfoldercheckbox="true" expandonload="false" showclose="true" oncloseclick="onCloseClick" popupwidth="200" url="/Control/api.ashx?method=QueryCollDepartmentInfo" />
  14.             </div>
  15.             <div field="ListPowerUser" width="100%">员工权限<input property="editor" class="mini-textbox" style="width:100%;" /></div>
  16.             <div field="LanguageID" width="100px;">语言包ID<input property="editor" class="mini-textbox" style="width:100%;" /></div>
  17.             <div field="RemarkInfo" width="300px;">备注<input property="editor" class="mini-textarea" style="width:100%;" /></div>
  18.         </div>
  19.     </div>
  20. //加载时使用onDrawCell，那修改时应该用哪个方法触发？
  21. function onDrawCell(e)
  22.         {
  23.             var data = e.field;
  24.             if (e.field == "ListPowerDepartmentID")
  25.                 alert(e.node["ListPowerDepartmentID"]);


  28.         }
复制代码


举报

factory

Rank: 8Rank: 8
10#
发表于 2014-1-3 16:09:19 |只看该作者
yy0033 发表于 2014-1-3 16:06
折腾了一个小时，还是没太明白。
应该在哪儿触发getChanges()事件呢？

你不需要管getChanges()的啊

我只是举个获取行对象的方法例子而已

我就是告诉你,你只要指明了displayField, 那么行数据中,自然就会给你加上displayField字段,你可以用这个把单元格文本保存起来

举报

12下一页
返回列表 发新帖

Archiver|普加软件

GMT+8, 2025-7-17 04:40 , Processed in 1.052484 second(s), 11 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部