jqGrid treeGrid树形表格使用记录

以下内容中:fileList 为表格的id

1.编辑状态下无法获取实时的值【即编辑时候的值】  

2.获取值都要先保存编辑状态        $("#fileList").jqGrid("saveRow",ids[i]);

3.赋值都要打开编辑状态                $("#fileList").jqGrid("editRow",ids[i]);

4.获取值                                            
    var record = $("#fileList").jqGrid("getRowData", rowId, true);
    $("#fileList").jqGrid('getNodeParent',$("#fileList").jqGrid("getLocalRow", id));    //保存每次选中行父节点的数据
    
5.重写生成id的规则    【此方法是修改jqGrid源码方法】
        $.jgrid.randId = function()    {    //重写jqGrid生成ID号规则。
            return Math.random().toString(36).substr(21);    //JS生成随机数
        }

6.监听事件
        //选中行监听事件
    jQuery("#fileList").on("jqGridSelectRow", function(event, id, orgEvent) {
            parentData = $("#fileList").jqGrid('getNodeParent',$("#fileList").jqGrid("getLocalRow", id));    //保存每次选中行父节点的数据
        });
      
          //新增修改    监听事件
          /** frmgr 为新增的数据 */
        jQuery("#fileList").on("jqGridAddEditAfterComplete",function(copydata, postdata, frmgr, frmoper){
            /** 新增: 查看新增的节点是否有父节点, 有:父节点数据清空,且父节点不能编辑,自己可以编辑; 没有:自己可以编辑。 */
            if(isHaveParent(frmgr.id)){    //有
                var parent = $("#fileList").jqGrid('getNodeParent',$("#fileList").jqGrid("getLocalRow", frmgr.id));    //父节点数据
                    parent.startDate = null;
                    parent.endDate = null;
                    parent.examiner = null;
                    parent.comment = null;
                $("#fileList").jqGrid("setTreeRow",parent.id,parent);
                $("#fileList").jqGrid("saveRow",parent.id);
            }
            $("#fileList").jqGrid("editRow",frmgr.id);
        });
          
          //删除监听事件
          /** 删除: 查看当前删除的节点的父节点下面还有没有子节点, 有:父节点不可以编辑; 没有:父节点可以编辑 */
        jQuery("#fileList").on("jqGridDelRowAfterComplete",function(){
            if(isHaveChildren(parentData.id)){
                //$("#fileList").jqGrid("saveRow",parent.id);
            }else{
                $("#fileList").jqGrid("editRow",parentData.id);
            }
        });

7.ajax获取数据绑定数据
//获取数据
    function getData(){
        layer.load(2);
            var url = "/Windchill/rest/ams/cert/getFileListTemplate";
            //var url = "/Windchill/netmarkets/jsp/ext/ams/CERT/AC/fileList/data2.json";
            $.ajax({
                url:url,
                type:"POST",
                data:{
                    "type":"ac"
                },
                dataType:"json",
                success:function(data){
                    for(var i in data ){
                        data[i].loaded = "true";
                        data[i].expanded = "true";
                    }
                    $("#fileList")[0].addJSONData(data);
                  $("#fileList").jqGrid("setGridParam",{datatype:"local"});    //*解决工具栏增删问题 【问题描述:绑定上数据之后,原来的添加,删除事件存在bug;如无法添加多层级】

                    startEdit();
                    layer.closeAll("loading");
                },
                error:function(data){
                    layer.closeAll("loading");
                    layer.msg(data,{time:other.layerMsgTime});
                }
            });
    }

8.参考资料:

http://www.guriddo.net/demo/bootstrap/

9.jqGrid 树形表格多选参考

https://blog.csdn.net/zrk1000/article/details/46889455

treegrid插件 当前选中的行: var config = { id: "tg1", width: "800", renderTo: "div1", headerAlign: "left", headerHeight: "30", dataAlign: "left", indentation: "20", folderOpenIcon: "images/folderOpen.gif", folderCloseIcon: "images/folderClose.gif", defaultLeafIcon: "images/defaultLeaf.gif", hoverRowBackground: "false", folderColumnIndex: "1", itemClick: "itemClickEvent", columns:[ {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"}, {headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"}, {headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook"} ], data:[ {name: "城区分公司", code: "CQ", assignee: "", children:[ {name: "城区卡品分销中心"}, {name: "先锋服务厅", children:[ {name: "chlid1"}, {name: "chlid2"}, {name: "chlid3", children: [ {name: "chlid3-1"}, {name: "chlid3-2"}, {name: "chlid3-3"}, {name: "chlid3-4"} ]} ]}, {name: "半环服务厅"} ]}, {name: "清新分公司", code: "QX", assignee: "", children:[]}, {name: "英德分公司", code: "YD", assignee: "", children:[]}, {name: "佛冈分公司", code: "FG", assignee: "", children:[]} ] }; /* 单击数据行后触发该事件 id:行的id index:行的索引。 data:json格式的行数据对象。 */ function itemClickEvent(id, index, data){ window.location.href="ads"; } /* 通过指定的方法来自定义栏数据 */ function customCheckBox(row, col){ return ""; } function customOrgName(row, col){ var name = row[col.dataField] || ""; return name; } function customLook(row, col){ return "查看"; } //创建一个组件对象 var treeGrid = new TreeGrid(config); treeGrid.show(); /* 展开、关闭所有节点。 isOpen=Y表示展开,isOpen=N表示关闭 */ function expandAll(isOpen){ treeGrid.expandAll(isOpen); } /* 取得当前选中的行,方法返回TreeGridItem对象 */ function selectedItem(){ var treeGridItem = treeGrid.getSelectedItem(); if(treeGridItem!=null){ //获取数据行属性值 //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name); //获取父数据行 var parent = treeGridItem.getParent(); if(parent!=null){ //jQuery("#currentRow").val(parent.data.name); } //获取子数据行集 var children = treeGridItem.getChildren(); if(children!=null && children.length>0){ jQuery("#currentRow").val(children[0].data.name); } } }
<!DOCTYPE html> <html xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min14ed.css" /> <link rel="stylesheet" type="text/css" media="screen" href="jqgrid/ui.jqgridffe4.css" /> <style> html, body { margin: 0; padding: 0; font-size: 75%; } </style> [removed][removed] [removed][removed] [removed][removed] [removed] $(document).ready(function(){ $.jgrid.defaults.styleUI="Bootstrap"; var topicjson={ "response": [ { "id": "1", "elementName": "Grouping", "url":"/asd/asda", level:"0", parent:"", isLeaf:false, expanded:false, loaded:true }, { "id": "1_1", "elementName": "Simple Grouping", "url":"/asd/12", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "1_2", "elementName": "May be some other grouping", "url":"/asd/14342", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "2", "elementName": "CustomFormater", level:"0", parent:"", isLeaf:false, expanded:false, loaded:true }, { "id": "2_1", "elementName": "Image Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true }, { "id": "2_3", "elementName": "Anchor Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true } ] }, grid; grid = jQuery("#jsonmap"); grid.jqGrid({ datastr: topicjson, datatype: "jsonstring", height: "auto", loadui: "disable", colNames: ["id","Items","url"], colModel: [ {name: "id",width:200, hidden:true, key:true}, {name: "elementName", editable:true,width:250, resizable: false}, {name: "url",width:200, editable:true,hidden:false} ], treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "elementName", treeIcons: {leaf:'ui-icon-document-b'}, caption: "jqGrid Demos", autowidth: true, rowNum: 10000, ExpandColClick: true, jsonReader: { repeatitems: false, root: "response" }, onSelectRow: function(id){ } }); }); [removed] </head> <body> <table id="jsonmap" ></table> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值