Question

我通过格式化以下值来显示jqgrid中的数据

GroupName | GroupDesc |行动
<小时/>   Hari | DESC1 |编辑

我的代码下面，我现在尝试

{
    $("#group_details").jqGrid({

        datatype : "local",
        data : groupdataMod,
        autoheight : true,
        autowidth : true,
        shrinkToFit : true,
        jsonReader : {
            repeatitems : false
        },
        colNames : groupColNames,
        colModel : [ {
            name : 'userGroupName',
            index : 'userGroupName',
            sorttype : "text",
            align : "left",
            sortable : true,
            editable : true,
            formatter: function (cellvalue, options, rowObject) {
                return "<a href='javascript:void(0);' class='anchor usergroup_name link'>" +
                       cellvalue + '</a>';
            }
        }, {
            name : 'userGroupDesc',
            index : 'userGroupDesc',
            sorttype : "text",
            align : "text",
            editable : true
        }, {
            name : 'action',
            index : 'action'
        } ],
        search : true,
        pager : '#pager_group',
        rowNum : 13,
        height : "auto",
        multiselect : true,
        imgpath : 'css/images/',
        rowList : [ 13, 26, 39, 52 ],
        sortname : 'id',
        sortorder : 'asc',
        viewrecords : true,
        loadComplete : function() {
            ModifyGridDefaultStyles_group();
        },
        onCellSelect: function(rowid, iCol, cellcontent){ 
            if(cellcontent=="Edit"){
                grid.jqGrid('editRow',rowid);
            } 

        }
    });
}

这里我使用formatter选项格式化groupName值并添加值的超链接。但是当再次编辑行时，它会在单元格输入框中显示整个锚标记，如下所示 edit row
但我想在编辑时只看到单元格输入框的值。任何人都可以帮助如何在没有锚标记的情况下编辑行中的值。

Answer 1

根据我的功能，我得到了解决这个问题的方法。这是我实现它的代码。

var reqPar;
var grid;
var selRowId, celValue;
var groupdataMod;
var jsonResponse;
var groupColNames = [ "GROUP NAME", "GROUP DESCRIPTION", "ACTION", "GROUP ID" ];
function GroupDisplay(groupdata) {
    var groupDetails = JSON.parse(groupdata.toString());
    groupdataMod = groupDetails.userGroupDetails;

    $(document).ready(function() {
        grid = $("#group_details");

        $("#group_details").jqGrid({

            datatype : "local",
            data : groupdataMod,
            autoheight : true,
            autowidth : true,
            shrinkToFit : true,
            jsonReader : {
                repeatitems : false
            },
            colNames : groupColNames,
            colModel : [ {
                name : 'userGroupName',
                index : 'userGroupName',
                sorttype : "text",
                align : "left",
                sortable : true,
                editable : true,
                edittype:'custom',
                formatter: function (cellvalue, options, rowObject) {
                    return "<a href='javascript:void(0);' class='anchor usergroup_name link'>" +
                           cellvalue + '</a>';
                },
                editoptions:{custom_element: myelem,custom_value:myvalue11}
            }, {
                name : 'userGroupDesc',
                index : 'userGroupDesc',
                sorttype : "text",
                align : "text",
                editable : true
            }, {
                name : 'action',
                index : 'action'
            },{
                name : 'userGroupId',
                index : 'userGroupId',
                hidden:true,
                editable: true,
                editrules:{edithidden:false,disabled: true}
            } ],
            search : true,
            pager : '#pager_group',
            rowNum : 13,
            height : "auto",
            multiselect : true,
            imgpath : 'css/images/',
            rowList : [ 13, 26, 39, 52 ],
            sortname : 'id',
            sortorder : 'asc',
            viewrecords : true,
            loadComplete : function() {
                ModifyGridDefaultStyles_group();
            },gridComplete: function(){
                var ids = grid.jqGrid('getDataIDs');
                for(var i=0;i < ids.length;i++){
                    var cl = ids[i];
                    be = "<input style='height:22px;width:auto;' type='button' value='Edit' onclick=\"grid.jqGrid('editRow','"+cl+"');\"  />";
                    se = "<input style='height:22px;width:auto;' type='button' value='Save' onclick=\"grid.saveRow('"+cl+"',editparameters);myvalEdit('"+cl+"');\"  />"; 
                    ce = "<input style='height:22px;width:auto;' type='button' value='Clear' onclick=\"grid.restoreRow('"+cl+"');\" />";
                    grid.jqGrid('setRowData',ids[i],{action:be+se+ce});
                }   
            },
            onCellSelect: function(rowid, iCol, cellcontent){ 
                if(cellcontent=="Edit"){      
                    grid.jqGrid('editRow',rowid);
                }
            },
            editurl: "Oper.htm",
            mtype:"POST",
            editData: function (){
                var sel_id = grid.jqGrid('getGridParam', 'selrow');
                //alert("sel_id >>>>"+sel_id);
            }
        });
        $("#grid").jqGrid('setGridParam', {
            ondblClickRow : function(rowid, iRow, iCol, e) {
                alert('double clicked');
            }
        });
        $("#group_details").jqGrid('navGrid', '#pager_group', {
            search : true,
            refresh : true,
            add : false,
            edit : false,
            del : false,
            view: true
        },{
            beforeShowForm: function(form){
                var elm = form.find('#userGroupName');
                elm.val($(elm.val()).text());
        }
        });
        grid.jqGrid('inlineNav',"#pager_group",{edit:false,add:true,del:false});

    });
}
function sendMail() {
    var link = 'mailto:noReply@aig.com?subject=Message from '
            + document.getElementById('email_address').value + '&body='
            + document.getElementById('email_address').value;
    window.location.href = link;
}
function ModifyGridDefaultStyles_group() {
    $('#' + "group_details" + ' tr').removeClass("ui-widget-content");
    $('#' + "group_details" + ' tr:nth-child(even)').addClass("evenTableRow");
    $('#' + "group_details" + ' tr:nth-child(odd)').addClass("oddTableRow");
}

function exportGrid() {
    var grid = "#group_details";

    var mya = new Array();
    mya = $(grid).getDataIDs(); // Get All IDs

    var data = $(grid).getRowData(mya[0]); // Get First row to get the labels
    var colNames = new Array();

    var ii = 0;
    for ( var i in data) {
        colNames[ii++] = i;
    } // capture col names

    var html = "";

    var columnNames = $(grid).jqGrid('getGridParam', 'colNames');

    for (i = 0; i < columnNames.length - 1; i++) {
        html = html + columnNames[i + 1] + "\t";
    }

    html = html + "\n";

    for (i = 0; i < mya.length; i++) {
        data = $(grid).getRowData(mya[i]); // get each row
        for (j = 0; j < colNames.length; j++) {
            html = html + data[colNames[j]] + "\t"; // output each column as tab delimited
        }

        html = html + "\n"; // output each row with end of line
    }
    html = html + "\n"; // end of line at the end

    window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
    Response.Clear();
    Response.ClearContent();
    Response.ClearHeaders();
    Response.Buffer = false;
    Response.BufferOutput = false;

    //e.preventDefault();
    Response.AddHeader("Content-Disposition",
            "attachment;filename=download.xls");
}


function editLinkFmatterEdit(cellvalue, options, rowObject, rowid, cellcontent) {
    var removelink = "";
    var groupName = rowObject["userGroupName"];
    var groupDesc = rowObject["userGroupDesc"];
    reqPar = [ groupName, groupDesc ];
    removelink = "<a href=javascript:void(0); onclick=enableEdit(reqPar) class=requestlink>Edit</a>";
    return removelink;
}
function editLinkFmatterGrp(cellvalue, options, rowObject, rowid) {
    var removelink = "";
    var groupName = rowObject["userGroupName"];
    var groupDesc = rowObject["userGroupDesc"];
    reqPar = [ groupName, groupDesc ];
    removelink = "<a class='anchor usergroup_name link'>"+groupName+"</a>";
    return removelink;
}
function myvalue11(elem, operation, value) {
    if(operation === 'get') {
       return $(elem).val();
    } else if(operation === 'set') {
       $('input',elem).val(value);
    }
}
function myelem (value, options) {
      var el = document.createElement("input");
      var val1 = $(value).text();
      if (val1=="undefined"){
          //alert("undefined value is came");
          val1 = "";
      }
      el.type="text";
      el.value = val1;
      el.class = "editable inline-edit-cell ui-widget-content ui-corner-all";
      el.style = "width:96%";
      return el;
        //return $(value).text();
    }

function myvalEdit(res){
    //alert(res);
}

var editparameters = {
        "keys" : false,
        "oneditfunc" : null,
        "successfunc" : null,
        "url" : "Oper.htm",
        "extraparam" : {},
        "aftersavefunc" : null,
        "errorfunc": null,
        "afterrestorefunc" : null,
        "restoreAfterError" : true,
        "mtype" : "POST"
    };

添加到网格单元格值的超链接，需要在编辑操作上编辑该单元格

1 个答案: