jqGrid实现自定义单元：raty-plugin的集成

Question

我乍一看这个简单的任务已经工作了几天 - 实现一个自定义单元格。任务如下：创建一个带有id的div元素的自定义单元格（例如"mydiv"），然后调用这个div的函数，如$('#mydiv').raty({start: cellvaue, readonly:true})然后，第3个子任务 - 在编辑中mode（editGridRow）我必须将raty-function的参数更改为readonly:false，因为它应该可以更改值。

首先，我使用过格式化程序。在格式化程序中，我定义了我的div元素，并在afterInsertRow中调用了我的函数$（'＃mydiv'）。raty（{start：cellvalue，readonly：true}）。对于概述它完美地工作。但是，在editGridRow的编辑模式对话框中，始终呈现表单输入文本，这里我不需要。我在这里仍然只需要我的div元素。如果我理解正确，格式化程序只修改值，但仍然呈现输入文本。

然后我转向edittype: custom，但它没有帮助，因为这些函数仅在editGridRow中第一次被调用。

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

感谢您的任何提示。

更新 感谢Oleg，我非常接近这项任务的正常运作。在这里，我将描述我的解决方案（基于Oleg的建议，或者至少基于我对他的提示的解释）。 jqGrid定义为datatype: "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();};

然后是模态编辑对话框：

ondblClickRow: function(id) {
jQuery('#grid').jqGrid('editGridRow',id,
{closeOnEscape:true,width:400, 
savekey:[true,13],
recreateForm:true,beforeShowForm:initRating
});

initRating函数：

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);
 }
 }

评级插件这么小的事情有很多步骤。难以置信的。 最后一个未解决的问题是将当前评级得分转换为initRating函数。这意味着如果我去editGridRow我还没有定义评分。嗯。

Answer 1

关于edittype:custom选项，我建议您阅读this以及此旧答案。使用recreateForm:true设置使自定义编辑功能custom_element和custom_value一次性调用非常重要。

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

还有一件事对我来说是无用的。为什么需要在单元格中包含id="mydiv"？您的实现是否允许插入具有相同名称的多个ID？这将是一个错误。如果您可以根据包含的单元格或行包含查找单元格，则可以在.raty({start: cellvaue, readonly:true})事件处理程序内部调用loadComplete，而无需向{{1}插入其他id属性元素。 <td>的使用使网格更慢，因为它强制在添加每一行时渲染网格，而不仅仅是在所有行都插入网格后（参见afterInsertRow选项）。

更新：花了这么多时间撰写评论后，在发布代码后，我修改了代码，以展示如何集成raty-plugin。结果是the demo看起来像
我使用inline editing代替form editing只是因为表单编辑不完全支持本地编辑，但我想在没有任何服务器组件的情况下进行演示。

在代码中，我使用双击进行行编辑。以下是主要代码片段：

gridview:true

如果您要使用表单编辑并调用editGridRow函数而不是editRow，则需要使用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 }); 选项并使用afterComplete或afterSubmit来调用recreateForm:true包含修改后的值（就像我在代码示例中使用editRow的initRaty参数一样）。