如何使用jqGrid和jsonReader的主键

时间:2012-02-27 17:46:40

标签: jquery jqgrid jsonreader

我查了几篇帖子,但不明白如何使用jsonReader。我希望在编辑和添加时隐藏我的主键。如果我将我的权限ID editable:false或隐藏它不会编辑。

对其他帖子的任何帮助或指示都会很棒,非常感谢。感谢

这是我的代码:

$(document).ready(function()
    {   
        $("#list").jqGrid(
        {
            url:'Users2.cfc?method=getUsers', //CFC that will return the users
            datatype: 'json', //We specify that the datatype we will be using will be JSON
            colNames:['Bill To Code','User ID', 'GL_comp_key', 'Branch ID', 'Warehouse ID', 'Final Approver',  'Active', 'Primary Approver', 'Administrative','Secondary Approver','permissionID'], //Column Names
            //The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc.
            colModel :[
                {name:'ar_bill_key',index:'ar_bill_key', width:125, sorttype:"text",editable:true,searchoptions:{sopt:['eq','lt','le','gt','ge','bw','ew','cn']},
                    editable:true,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
                {name:'userID',index:'userID', width:125, align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']},
                    editable:true,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
                {name:'gl_cmp_key',index:'gl_cmp_key', width:125, align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']},
                    editable:true,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
                {name:'so_brnch_key',index:'so_brnch_key', width:125, align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']},
                    editable:true,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
                {name:'so_whs_key',index:'so_whs_key', width:125,align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']},
                    editable:true,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
                {name:'final_approver',index:'final_approver', width:125,align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']},
                    editable:true,edittype:"select",editoptions:{value:"1:Yes;0:No"},editrules:{required:true},formoptions:{elmprefix:"(*)"}},  
                {name:'active',index:'active', width:125,align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']},
                    editable:true,edittype:"select",editoptions:{value:"1:Yes;0:No"},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
                {name:'primary_approver',index:'primary_approver', width:125,align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']},
                    editable:true,edittype:"select",editoptions:{value:"1:Yes;0:No"},editrules:{required:true},formoptions:{elmprefix:"(*)"}},  
                {name:'admin',index:'admin', width:125,align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']},
                    editable:true,edittype:"select",editoptions:{value:"1:Yes;0:No"},editrules:{required:true},formoptions:{elmprefix:"(*)"}},  
                {name:'secondary_approver',index:'secondary_approver', width:130,align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']},
                    editable:true,edittype:"select",editoptions:{value:"1:Yes;0:No"},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
                {name:'permissionID',index:'permissionID',sorttype:"int",editable:true,searchoptions:{sopt:['eq','lt','le','gt','ge']}},
            ],//searchoptions parameter is used to limit the operators available during search
            pager: $('#pager'), //The div we have specified, tells jqGrid where to put the pager
            rowNum:20, //Number of records we want to show per page
            rowList:[20,30,40,50], //Row List, to allow user to select how many rows they want to see per page
            sortorder: "desc", //Default sort order
            sortname: "ar_bill_key", //Default sort column
            viewrecords: true, //Shows the nice message on the pager
            imgpath: '/images', //Image path for prev/next etc images
            caption: 'Permissions', //Grid Name
            recordtext: "Record {0} - {1} of {2}",//Pager information to show
            rownumbers: true,//Show row numbers
            rownumWidth: "30",//Width of the row numbers column
            sortable: true,
            height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager
            mtype:'POST',   
            toolbar:[true,"top"], //Shows the toolbar at the top. We will use it to display user feedback
            //The JSON reader. This defines what the JSON data returned from the CFC should look like
            jsonReader: {
                root: "ROWS", //our data
                page: "PAGE", //current page
                total: "TOTAL", //total pages
                records:"RECORDS", //total records
                userdata:"USERDATA", //Userdata we will pass back for feedback
                cell: "", //Not Used
                ar_bill_key: "0" //Will default to first column
                },
            editurl:"Users2.cfc?method=addeditUser" //The Add/Edit function call                
            }               
        ).navGrid('#pager',
            {
                search:true,searchtitle:"Search",//title set for hover over display
                edit:true,edittitle:"Edit User",
                add:true,addtitle:"Add User",
                del:false,deltitle:"Delete User"
            },
        // Edit Options. savekey parameter will keybind the Enter key to submit.
        {editCaption:"Edit User",edittext:"Edit",closeOnEscape:true, savekey: [true,13],errorTextFormat:commonError
            ,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"70",width:500}, 
        {width:500,addCaption:"Add User",edittext:"Add",closeOnEscape:true,savekey: [true,13],errorTextFormat:commonError,
            reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"70"}, //Add Options
        {url:"Users2.cfc?method=delUser",caption:"Delete User",closeOnEscape:true,errorTextFormat:commonError,top:"60",left:"70",
            reloadAfterSubmit:true}, //Delete Options
         //Search Options. multipleSearch parameter lets it know we are going to use the new advanced search feature
        {errorTextFormat:commonError,Find:"Search",closeOnEscape:true,caption:"Search Users",multipleSearch:true,closeAfterSearch:true}
        );          

        //Function will be called when add/edit encounters an error. The returned message is what will be shown to user 
        function commonError(data)
        {           
            return "Error Occured during Operation. Please try again";
        }

    }
);

1 个答案:

答案 0 :(得分:1)

如果我理解你的问题是正确的,你只需要在编辑期间发送permissionID,但你不需要在某处显示它。

我想,你原来的问题是你没有指定哪个id应该有网格的行。 JSON输入应包含id。如果您在cell: ""中使用jsonReader设置,则必须从两个方面指定行中的ID:

  • 您在key: true列的定义中包含'permissionID'属性。如果您不需要将列标记为可编辑(可以删除editable:true)。
  • 如果您永远不需要向用户显示列'permissionID',您可以删除'permissionID'并只包含jsonReader属性{{1} }}。如果我计算得正确,则将主键id: "10"作为第10个位置。如果permissionID的值仅保存为网格行(permissionID元素)的id<tr>将始终在所有编辑操作中发送。