jqGrid实现自定义单元格：整合raty-plugin

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

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

然后我切换到edittype: custom ，但它没有帮助，因为这些function是第一次只在editGridRow调用。

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

感谢您的任何提示。

更新感谢奥列格现在我非常接近这个任务的正常运作。 在这里，我将描述我的解决scheme（根据奥列格的build议，或至less在我的解释他的提示）。 jqGrid是用datatype: "json"定义的。 自定义单元格定义为：

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

提到的function定义如下：

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

初始化函数：

 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选项我build议你阅读这个和这个旧的答案。 使用recreateForm:true设置来自定义编辑函数custom_element和custom_value被称为不是ony一次是非常重要的。

你不包括任何代码在你的问题。 你对问题的描述允许你如何实现你描述的不同解释。 例如，我不清楚如何将raty函数的参数更改为readonly:false 。 您是否使用beforeShowForm事件（请参阅此例）或使用dataInit属性。 在这两种情况下都应该在正确执行的情况下工作。

还有一件事情对我不利。 为什么你需要在单元格中包含id="mydiv" ？ 您的实现是否允许插入多个具有相同名称的ID？ 这将是一个错误。 如果您可以根据单元格或包含的行来查找单元格，则可以在loadComplete事件处理函数中调用.raty({start: cellvaue, readonly:true}) ，并且不需要将其他id属性<td>元素。 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 }); 

如果你将使用表单编辑，并调用editGridRow函数，而不是editRow，你将需要使用recreateForm:true选项，并使用afterComplete或initRaty与修改后的值调用initRaty （就像我在我的代码示例中使用aftersavefunc参数）。