jqGrid之treeGrid及行拖拽

单纯的做个小记录

  今天做功能用到了jqGrid里面的treeGrid,遇到几个问题,这里做下记录

treeGrid

  树表格的应用在官网给出了很直白的例子:
    1.http://blog.mn886.net/jqGrid/ 3.3新特征 -- 树表格
       2.http://www.guriddo.net/demo/treegridjs/

  图标不显示

  参数设置什么的小生这里就不提了,出现这个问题基本是css库及背景图片造成的,如果遇到这种问题可以审查元素,看下css里面是否有相关样式及背景图片是否存在,下面附上背景图片下载链接:

  下载图片

拖拽行

  拖拽行功能的显示很简单:  

       $( ObjGrid ).jqGrid({
       // 省略配置代码
    });  
    // 拖拽行
    $( ObjGrid).jqGrid('sortableRows', { 
      items : '.jqgrow:not(.unsortable)'}
    )                

 

  这里的问题是:如果 treeGrid 是打开状态,那么行拖拽功能则为禁用状态(可怜小生在里面滚爬了好一会~)

  此次记录结束。

转载于:https://www.cnblogs.com/wbsndbf/p/8385196.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jqGrid TreeGrid 支持两种模式:嵌套模式(nested)和相邻模式(adjacency)。相邻模式是指表格数据中每个节点除了包含自身信息外,还包含其父节点的信息。以下是在 jqGrid TreeGrid 中使用相邻模式的基本步骤: 1. 定义表格列模型,包括节点 ID、节点名称、父节点 ID 等列。例如: ```javascript colModel: [ { name: 'id', width: 50, key: true }, { name: 'name', width: 150 }, { name: 'parent', width: 50, hidden: true } ] ``` 2. 加载表格数据,数据中每个节点应包含其父节点 ID。例如: ```javascript var data = [ { id: 1, name: 'Node 1', parent: null }, { id: 2, name: 'Node 2', parent: 1 }, { id: 3, name: 'Node 3', parent: 1 }, { id: 4, name: 'Node 4', parent: null }, { id: 5, name: 'Node 5', parent: 4 }, { id: 6, name: 'Node 6', parent: 4 } ]; $("#treegrid").jqGrid({ data: data, datatype: "local", colModel: [ { name: 'id', width: 50, key: true }, { name: 'name', width: 150 }, { name: 'parent', width: 50, hidden: true } ], treeGrid: true, treeGridModel: "adjacency", ExpandColumn: 'name', ExpandColClick: true, caption: "TreeGrid Example" }); ``` 3. 配置 TreeGrid 相关参数,包括 treeGridtreeGridModel 以及 ExpandColumn 等参数。 以上示例中的 treeGrid 参数设置为 true,表示启用 TreeGrid 功能;treeGridModel 参数设置为 adjacency,表示使用相邻模式;ExpandColumn 参数设置为 'name',表示使用名称列作为展开节点的列。 4. 启用 TreeGrid 功能,例如: ```javascript $("#treegrid").jqGrid('setGridParam', {treeGrid: true}).trigger('reloadGrid'); ``` 通过以上步骤,你就可以在 jqGrid TreeGrid 中使用相邻模式来展示树形数据了。需要注意的是,相邻模式的数据结构相对复杂,需要根据具体需求进调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值