jQuery MiniUI

标题: 树形控件问题 [打印本页]

---

作者: sasocket    时间: 2012-7-12 09:29:23     标题: 树形控件问题

<div class="mini-splitter" style="width:100%;height:100%;">
    <div showCollapseButton="true">
        <div class="mini-toolbar" style="padding:5px;border-top:0;border-left:0;border-right:0;">               
            
            <a class="mini-button" iconCls="icon-add" plain="true">新增</a>
            <span class="separator"></span>     
            <a class="mini-button" iconCls="icon-remove" plain="true">删除</a>     
            <span class="separator"></span>            
            <a class="mini-button" iconCls="icon-save" plain="true">保存</a>                  
        </div>
        <div class="mini-fit">
            <div id="grid1" class="mini-datagrid" style="width:100%;height:100%;" borderStyle="border:0" showFooter="false"  allowCellSelect="true" allowCellEdit="true" rowclick="onRowClick">
                <div property="columns">   
                    <div field="RoleID" width="60" headerAlign="center" allowSort="true">编号</div>           
                    <div field="RoleName" width="150" headerAlign="center" allowSort="true">角色名称
                        <input property="editor" class="mini-textbox" style="width:100%;"/>
                    </div>                  
                    <div field="RoleGroupID" width="120" allowSort="true" renderer="onGroupRenderer" align="center" headerAlign="center">分组
                        <input property="editor" class="mini-combobox" style="width:100%;" data="RoleGroupsData.data" textField="GroupName" valueField="GroupID"/>
                    </div>
                    <div field="RoleOrder" width="60" allowSort="true">排序
                        <input property="editor" class="mini-spinner" minValue="0" maxValue="200"  style="width:100%;"/>
                    </div>
                    <div field="RoleDescription" width="100%" headerAlign="center" allowSort="true">说明                     
                        <input property="editor" class="mini-textbox" style="width:100%;"/>
                    </div>                          
                </div>
            </div>  
        </div>
    </div>     
    <div size="240" showCollapseButton="true">
        <div class="mini-toolbar" style="padding:3px;border-top:0;border-left:0;border-right:0;">               
            <span style="padding-left:5px;">系统权限</span>               
        </div>
        <div class="mini-fit">
            <ul id="tree1" class="mini-tree" url="../data/data.ashx?op=GetRoleGrantAllList" style="width:100%;height:100%" showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="false" expandOnLoad="true" showCheckBox="true" showFolderCheckBox="false">        
            </ul>
        </div>
    </div>   
</div>

1. <script type="text/javascript">
   
2.     var RoleGroupsData = null;
   
3.     mini.parse();
   
4.     LoadGroups();
   
5.     mini.get("tree1").load();
   
6.     $(document).ready(function() {
   
7.         
   
8.       
   
9.     });
   
10. //加载数据
    
11. function LoadData() {
    
12.     var ctl = mini.get("grid1");
    
13.     ctl.mask("正在加载数据...");
    
14.     $.ajax({
    
15.         type: "POST",
    
16.         contentType: "application/json",
    
17.         url: "../data/ws.asmx/RolesGet",
    
18.         dataType: 'json',
    
19.         success: function(result) {
    
20.             ctl.unmask();
    
21.             var res = mini.decode(result.d);
    
22.             if (CheckMsg(res)) return;
    
23.             ctl.set({ "data": res });
    
24.         },
    
25.         error: function(XmlHttpRequest, textStatus, errorThrown) {
    
26.             ctl.unmask();
    
27.             alert(XmlHttpRequest.responseText);
    
28.         }
    
29. 
    
30.     });
    
31. }
    
32. 
    
33. function LoadGroups() {
    
34.     var ctl = mini.get("grid1");
    
35.     $.ajax({
    
36.         type: "POST",
    
37.         contentType: "application/json",
    
38.         url: "../data/ws.asmx/RoleGroupsGet",
    
39.         dataType: 'json',
    
40.         success: function(result) {
    
41.             RoleGroupsData = mini.decode(result.d);
    
42.             LoadData();
    
43.             CheckMsg(RoleGroupsData);
    
44.         },
    
45.         error: function(XmlHttpRequest, textStatus, errorThrown) {
    
46.             alert(XmlHttpRequest.responseText);
    
47.         }
    
48. 
    
49.     });
    
50. }
    
51. //渲染
    
52. function onGroupRenderer(e) {
    
53.     for (var i = 0; i < RoleGroupsData.Count; i++) {
    
54.         if (e.record.RoleGroupID == RoleGroupsData.data.GroupID)
    
55.             return RoleGroupsData.data.GroupName;
    
56.     }
    
57. }
    
58. //row click
    
59. function onRowClick(e) {
    
60.     alert(e.record.RoleName);
    
61. }

复制代码

其中  mini.parse();
    LoadGroups();
    mini.get("tree1").load();
这样树形数据无法显示
LoadGroups();
    mini.get("tree1").load();
把mini.parse();注释掉就OK，请问什么问题呢？

---

作者: niko    时间: 2012-7-12 10:11:54

你这个代码好复杂啊。
如果你想做表格、树形联动，可以参考：
http://www.miniui.com/demo/#src=tree/detailgrid.html

---

作者: sasocket    时间: 2012-7-12 10:22:40

niko 发表于 2012-7-12 10:11
你这个代码好复杂啊。
如果你想做表格、树形联动，可以参考：
http://www.miniui.com/demo/#src=tree/detai ...

联动没问题，问题是mini.parse();这句
我加了这句，树形数据无法显示，不加这句就可以显示

---

作者: sasocket    时间: 2012-7-12 10:25:06

niko 发表于 2012-7-12 10:11
你这个代码好复杂啊。
如果你想做表格、树形联动，可以参考：
http://www.miniui.com/demo/#src=tree/detai ...

<div class="mini-fit">
            <ul id="tree1" class="mini-tree" url="../data/data.ashx?op=GetRoleGrantAllList" style="width:100%;height:100%" showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="false" expandOnLoad="true" showCheckBox="true" showFolderCheckBox="false">        
            </ul>
        </div>
简单来说
mini.parse();
mini.get("tree1").load();这样写树形数据无法显示
只写这行
    mini.get("tree1").load(); 树形数据正常显示

---

作者: niko    时间: 2012-7-12 10:51:47

应该不是把。
mini.parse方法，是将HTML标签转换为控件对象。
只有转换为控件对象后，才能有load方法。

---

作者: sasocket    时间: 2012-7-12 10:52:48

niko 发表于 2012-7-12 10:51
应该不是把。
mini.parse方法，是将HTML标签转换为控件对象。
只有转换为控件对象后，才能有load方法。 ...

现在就是这个情况哦，我把mini.parse();这行注释掉，就正常了

---

作者: sasocket    时间: 2012-7-12 10:55:29

niko 发表于 2012-7-12 10:51
应该不是把。
mini.parse方法，是将HTML标签转换为控件对象。
只有转换为控件对象后，才能有load方法。 ...

可以了，汗，TREE 不需要调用load方法，会自动加载，晕死

---

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)

Powered by Discuz! X2