定制单元的jqGrid实现：raty插件的集成

我已经工作了几天，第一眼就看到了这个简单的任务——实现一个自定义单元格。任务如下：用一个id为的div元素创建一个自定义单元格（例如

“mydiv”

），然后为这个div调用一个函数，比如

$（'#mydiv'）.raty（{start:cellvaue，readonly:true}）

，然后在编辑模式下调用第三个子任务（

editGridRow

）我必须将raty函数的参数更改为

readonly:false

，因为应该可以更改值

首先，我与formatter合作过。在格式化程序中，我定义了我的div元素，并在afterInsertRow中调用了我的函数$（'#mydiv'）.raty（{start:cellvalue，readonly:true}）。总而言之，它工作得非常好。但是，在

editGridRow

的编辑模式对话框中，始终呈现表单输入文本，这里不需要。我这里仍然只需要我的div元素。如果我理解正确，格式化程序只修改值，但仍然呈现表单输入文本

然后我切换到

edittype:custom

，但它没有帮助，因为这些函数第一次仅在editGridRow中调用

我确信这个问题是可以解决的，唯一的问题是如何解决

谢谢你的提示

更新 多亏了Oleg，我现在非常接近这项任务的正常实施。这里我将描述我的解决方案（基于Oleg的建议，或者至少基于我对他的建议的解释）。 jqGrid是用

数据类型：“json”

定义的。 自定义单元格定义为：

name:'ranking', editable:true, edittype:'custom',formatter:ratingFormatter, 
editoptions:{custom_element:ratingFormatter, custom_value:ratingValue}

上述功能定义如下：

function ratingFormatter(cellvalue, options, rowObject) {return '<div class="rnk"></div>';}; 

function ratingValue(elem, operation, value) {return $('#ranking-score').val();};

初始化功能：

function initRating() {$('#ranking').raty({path:'/img/'})};

最后是loadComplete事件

 loadComplete: function (data) {
 var ids = jQuery("#grid").getDataIDs();
 for(var i=0;i<ids.length;i++){
 var rowid = ids[i];
 var ranking = data.rows[i].cell[6];
 $('#' + rowid +'> td > div.rnk').raty({path:'/img/',start:ranking,readOnly:true});
 $('#' + rowid).contextMenu('MenuJqGrid', eventsMenu);
 }
 }

loadComplete:函数（数据）{
var id=jQuery（“#grid”）.getDataId（）；
对于（var i=0；i关于
edittype:custom
选项，我建议您阅读并回答这些旧的答案。使用
recreateForm:true
设置使自定义编辑函数
custom\u元素
和
custom\u值
不被调用一次非常重要

您的问题中没有包含任何代码。您对问题的描述允许对您如何实现所描述的内容进行不同的解释。例如，我不清楚如何将raty函数的参数更改为
readonly:false
。是否使用事件（请参见示例）或者使用的
dataInit
属性。在这两种情况下，在正确实现的情况下，所有属性都应该工作

还有一件事我不清楚。为什么需要在单元格中包含
id=“mydiv”
？您的实现是否允许使用相同的名称插入多个id？这将是一个错误。如果可以根据单元格包含或行包含找到单元格，则可以调用
.raty（{start:cellvue，readonly:true}）
在
loadComplete
事件处理程序中，您不需要向
元素插入额外的id属性。使用
afterInsertRow
会使网格更慢，因为它会强制在添加每一行时渲染网格，而不仅仅是在将所有行插入网格之后（请参见
gridview:true
选项）

更新：在花了这么多时间写评论并发布代码后，我修改了代码，以展示raty插件是如何集成的

我之所以使用而不是仅仅是因为表单编辑不完全支持本地编辑，但我想制作没有任何服务器组件的演示

就像在您的代码中一样，我使用双击进行行编辑。以下是主要代码片段：

var lastSel;
var grid = $("#list");
var initRaty = function(rowid) {
    var ranking = grid.getCell(rowid,4); // the Ranking column has the index 4
    // because we use rownumbers:true the index of the Ranking column will be 1 higher
    $('#' + rowid +'> td:nth-child(5) > div').raty({
        path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
        start:ranking,
        readOnly:true
    });
};
grid.jqGrid({
    // ...
    colModel: [
        // other column definition
        { name:'Ranking', editable:true, width: 100, title: false,
          formatter: function(cellvalue, options, rowObject) {
              // insert div needed for the raty plugin
              // and insert a hidden span with the rating value
              return '<div></div><span style="display: none;">'+cellvalue+'</span>';
          }, unformat: function (cellvalue, options, cellobject) {
              // get rating value from the hidden span
              return cellobject.find("span").text();
          }, edittype:'custom', editoptions: {
              custom_element: function(value, options) {
                  var val = $(value);
                  var elem = $('<div id="'+options.id+'"/>');
                  setTimeout(function(){
                      elem.raty({
                          path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
                          start:(val.length>1? val[1].innerText: value)
                      });
                  }, 100);
                  return elem[0];
              },
              custom_value: function(elem) {
                  return elem.find("input").val();
              }
          }
        }
    ],
    editurl: 'clientArray',
    loadComplete: function (data) {
        var ids = grid.getDataIDs();
        for(var i=0;i<ids.length;i++){
            initRaty(ids[i]);
        }
    },
    ondblClickRow: function(id, ri, ci) {
        grid.jqGrid('editRow',id,true,null,null, 'clientArray', {}, initRaty);
    },
    onSelectRow: function(id) {
        if (id && id !== lastSel) {
            if (typeof lastSel !== "undefined") {
                grid.jqGrid('restoreRow',lastSel);
                var cell = $('#' + lastSel +'> td:nth-child(5)');
                var spans = cell.find('span');
                if (spans.length > 1) {
                    // if the lastSel row was not only selected, but also
                    // was in editing mode, get the hidden text with the ranking
                    var ranking = cell.find('span')[1].innerText;
                    cell.find('div').raty({
                        path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
                        start:ranking,
                        readOnly:true
                    });
                }
            }
            lastSel = id;
        }
    },
    // other jqGrid parameters
});

var-lastSel；
风险值网格=$（“#列表”）；
var initRaty=函数（rowid）{
var ranking=grid.getCell（rowid，4）；//排名列的索引为4
//因为我们使用rownumbers:true，排名列的索引将高出1
$（'#'+rowid+'>td:n子级（5）>div'）.raty({
路径：'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
开始：排名，
只读：正确
});
};
grid.jqGrid({
// ...
colModel：[
//其他列定义
{名称：'Ranking'，可编辑：true，宽度：100，标题：false，
格式化程序：函数（cellvalue、options、rowObject）{
//插入raty插件所需的div
//并插入具有额定值的隐藏跨度
返回“”+单元格值+“”；
}，未格式化：函数（cellvalue、选项、cellobject）{
//从隐藏范围中获取额定值
返回celobject.find（“span”）.text（）；
}，编辑类型：'custom'，编辑选项：{
自定义元素：函数（值、选项）{
var val=$（值）；
变量元素=$（''）；
setTimeout（函数（）{
拉蒂元素({
路径：'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
开始：（val.length>1？val[1]。内部文本：值）
});
}, 100);
返回元素[0]；
},
自定义值：函数（元素）{
返回元素find（“input”）.val（）；
}
}
}
],
editurl:'客户端阵列'，
loadComplete：函数（数据）{
var id=grid.getDataId（）；
对于（变量i=0；i 1）{
//如果不仅选择了lastSel行，而且
//在编辑模式下，获得隐藏文本的排名
var ranking=cell.find（'span'）[1]。innerText；
cell.find（'div'）.raty({
路径：'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
开始：排名，
只读：正确
});
}
}
lastSel=id；
}
},
//其他jqGrid参数
});

如果
var lastSel;
var grid = $("#list");
var initRaty = function(rowid) {
    var ranking = grid.getCell(rowid,4); // the Ranking column has the index 4
    // because we use rownumbers:true the index of the Ranking column will be 1 higher
    $('#' + rowid +'> td:nth-child(5) > div').raty({
        path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
        start:ranking,
        readOnly:true
    });
};
grid.jqGrid({
    // ...
    colModel: [
        // other column definition
        { name:'Ranking', editable:true, width: 100, title: false,
          formatter: function(cellvalue, options, rowObject) {
              // insert div needed for the raty plugin
              // and insert a hidden span with the rating value
              return '<div></div><span style="display: none;">'+cellvalue+'</span>';
          }, unformat: function (cellvalue, options, cellobject) {
              // get rating value from the hidden span
              return cellobject.find("span").text();
          }, edittype:'custom', editoptions: {
              custom_element: function(value, options) {
                  var val = $(value);
                  var elem = $('<div id="'+options.id+'"/>');
                  setTimeout(function(){
                      elem.raty({
                          path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
                          start:(val.length>1? val[1].innerText: value)
                      });
                  }, 100);
                  return elem[0];
              },
              custom_value: function(elem) {
                  return elem.find("input").val();
              }
          }
        }
    ],
    editurl: 'clientArray',
    loadComplete: function (data) {
        var ids = grid.getDataIDs();
        for(var i=0;i<ids.length;i++){
            initRaty(ids[i]);
        }
    },
    ondblClickRow: function(id, ri, ci) {
        grid.jqGrid('editRow',id,true,null,null, 'clientArray', {}, initRaty);
    },
    onSelectRow: function(id) {
        if (id && id !== lastSel) {
            if (typeof lastSel !== "undefined") {
                grid.jqGrid('restoreRow',lastSel);
                var cell = $('#' + lastSel +'> td:nth-child(5)');
                var spans = cell.find('span');
                if (spans.length > 1) {
                    // if the lastSel row was not only selected, but also
                    // was in editing mode, get the hidden text with the ranking
                    var ranking = cell.find('span')[1].innerText;
                    cell.find('div').raty({
                        path:'http://www.ok-soft-gmbh.com/jquery.raty/1.0.1/img/',
                        start:ranking,
                        readOnly:true
                    });
                }
            }
            lastSel = id;
        }
    },
    // other jqGrid parameters
});