如何在jqGrid中编辑单元格?

时间:2011-02-14 09:36:00

标签: jquery jqgrid

我尝试了这里的东西,但它没有用。看起来编写代码的方式与我的不同http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing

为了使其可编辑,我应该写什么?而不是最后一行?

//search for terms grid init
function stSearchTermsGridInit()
{
    // show terms into jqGrid
    $("#stSearchTermsGrid").jqGrid({
        mtype: "POST",
        postData:{},
        datatype: function(postdata) {
            $.ajax({
                url: 'ajax/ajax_termsSearchGridSimple.php',
                data: postdata,
                async: false,
                dataType: "xml",
                error: function(){
                    alert('Error loading XML document');
                },
                success: function(data,stat,xmldata){
                    //check error
                    var $error=$(data).find('error').text();
                    if($error!="0")
                    {
                        messageBox("Error",$error);
                        return;
                    }
                    //content
                    var $content=$(data).find('content').text();
                    if($content!="0")
                    {
                        var thegrid = $("#stSearchTermsGrid")[0];
                        thegrid.addXmlData(xmldata.responseXML);
                    }
                }
            });
        },
        colNames:["tId","term", "revTerm", "uType","freq","description","fId","facet","modifiedTime"],
        colModel:[
            //tId
            {name:'tId',index:'tId',align:"center",searchoptions:{sopt:['eq','ne','lt','le','gt','ge','in','ni']}},
            //term (editable)
            {name:'term',index:'term',searchoptions:{sopt:['eq','ne','in','ni','bw','bn','ew','en','cn','nc']},editable:true,edittype:'text',editoptions:{size:20},editrules:{required:true},formoptions:{elmsuffix:'(*)'}},
            //revTerm (editable)
            {name:'revTerm',index:'revTerm',searchoptions:{sopt:['eq','ne','in','ni','bw','bn','ew','en','cn','nc']},editable:true,edittype:'text',editoptions:{size:20},editrules:{required:true},formoptions:{elmsuffix:'(*)'}},
            //uType (editable)
            {name:'uType',index:'uType',align:"center",searchoptions:{sopt:['eq','ne','in','ni']},editable:true,edittype:'select',editoptions:{value:{'':'any','NPU':'proper noun','NU':'noun','VU':'verb'}}},
            //freq
            {name:'freq',index:'freq',align:"center",searchoptions:{sopt:['eq','ne','lt','le','gt','ge','in','ni']}},
            //description (editable)
            {name:'description',index:'description',searchoptions:{sopt:['bw','bn','ew','en','cn','nc']},editable:true,edittype:'textarea',editoptions:{rows:"3"}},
            //fId
            {name:'fId',index:'fId',align:"center",searchoptions:{sopt:['eq','ne','lt','le','gt','ge','in','ni']}},
            //facet
            {name:'facet',index:'facet',searchoptions:{sopt:['eq','ne','in','ni','bw','bn','ew','en','cn','nc']}},
            //modifiedTime
            {name:'modifiedTime',index:'modifiedTime',align:"center",searchoptions:{sopt:['eq','ne','lt','le','gt','ge','bw','bn','ew','en','cn','nc']}}
        ],
        gridComplete: function(){
            var $ids=$("#stSearchTermsGrid").jqGrid('getDataIDs');
            for($i=0;$i<$ids.length;$i++){
                var $reference="<a href='javascript:void();' onclick=\"toGoogle('stSearchTermsGrid','"+$ids[$i]+"');\">G</a>";
                //update columns
                $("#stSearchTermsGrid").jqGrid('setRowData',$ids[$i],{"reference":$reference});

                //coloring the recently classified row
                var $colorRecentlyModified = '#DFFC91';
                var modifiedTime = $("#stSearchTermsGrid").jqGrid('getCell',$ids[$i],'modifiedTime');
                var timeDiff = Math.abs(new Date() - new Date(modifiedTime.replace(/-/g,'/')));
                // 86400000 is the number of milliseconds in one day. Multiplying by days to mark the ones which are modified a few days ago
                timeLimit = 86400000 * 1.5;
                if(timeDiff < timeLimit)
                {
                    for(colN=2; colN<10; colN++)
                        $("#stSearchTermsGrid").jqGrid('setCell', $ids[$i], colN, '', {'backgroundColor':$colorRecentlyModified});      
                }

                //coloring the unclassified row
                var $colorUnclassified = '#FFCECE';
                var $fId = $("#stSearchTermsGrid").jqGrid('getCell',$ids[$i],'fId');
                if($fId == "0")
                {
                    for(colN=2; colN<10; colN++)
                        $("#stSearchTermsGrid").jqGrid('setCell', $ids[$i], colN, '', {'backgroundColor':$colorUnclassified});    

                }            
            }

        },
        sortable: true,
        //autowidth:true,
        width: 900, //width for grid
        height: 250, //height for grid
        sortname: 'term',    //default sort column
        caption: "Terms",    //caption for grid (empty will hide)
        hidegrid: false,
        gridview: true,        //load the grid more fast
        multiselect: true,    //support mulitselect
        //multiboxonly: true,
        pager: '#stSearchTermsGridPager',
        rowNum:10,
        rowList:[10,25,50,100,500,1000],
        viewrecords: true,    //show view record information
        viewsortcols: [true,'vertical',true], //show sortable column with icons
        editurl: 'ajax/ajax_termsEdit.php'
    });
    $("#stSearchTermsGrid").jqGrid('navGrid','#stSearchTermsGridPager',
        {edit:true,add:false,del:true,search:true,view:true,refresh:true}, 
        // edit options
        {    
            onclickSubmit : function(params, posdata) {
                var $tId=$("#stSearchTermsGrid").jqGrid('getGridParam','selrow');
                if($tId && $tId.length>0)
                {
                    var $rowAry=$("#stSearchTermsGrid").jqGrid('getRowData',$tId);
                    var $fId=$rowAry["fId"];
                    return {"fId":$fId}
                }
            },
            afterSubmit : gridAfterSubmit,
            reloadAfterSubmit: true,
            closeOnEscape:true,
            bottominfo:"Fields marked with (*) are required."
        },
        // add options
        {},
        //del options
        {
            msg: "Selected records(s) will be permanently deleted and cannot be recovered.<br/> Are you sure?",
            afterSubmit : gridAfterSubmit,
            reloadAfterSubmit: true,
            closeOnEscape:true
        },
        // search options
        {multipleSearch:true,closeOnEscape:true},
        //view options
        {
            closeOnEscape:true
        }
    );
    $("#stSearchTermsGrid").jqGrid('gridResize',{minWidth:900,maxWidth:2000,minHeight:250, maxHeight:1000}); 

    jQuery('#stSearchTermsGrid').editRow(2, true);

}

2 个答案:

答案 0 :(得分:0)

查看此链接...转到行编辑 - &gt;输入类型
EditableJqGrid

答案 1 :(得分:0)