JQgrid分组分组视图：在同一网格中向上/向下移动行，分组为true
我在JQgrid中向上或向下移动选定的行时遇到问题， 我需要在同一个网格中上下移动行，但由于事务（分组），它不起作用。没有分组它工作正常 对于JQgrid：
grouping:true,
groupingView : {
groupField : ['address'],
groupColumnShow : [false],
groupText : ['<b>Address: {0} - {1} Transaction(s)</b>'],
groupCollapse : false,
groupOrder: ['asc'],
groupDataSorted : true
},
当分组为真时，可以向上或向下移动选定的行。 任何人都可以共享示例代码吗？
上移/下移代码
function move(direction){
var selRowIds = getRowIDs('list4');
if(selRowIds.length == 0)
{
alert('Select Units to be moved '+direction);
}
else
{
if($('#list4').getGridParam('selrow')){
var ids = $('#list4').getDataIDs();
var temp = 0;
var currRow = $('#list4').getGridParam('selrow');
if(direction === 'up' && currRow > 1)
{
var r1 = $('#list4').getRowData(currRow-1);
var r2 = $('#list4').getRowData(currRow);
$('#list4').delRowData(currRow-1);
$('#list4').delRowData(currRow);
temp = r1.id; //16
r1.id = r2.id; // 17
r2.id = temp;// 16
$('#list4').addRowData(r1.id, r1); // 17
$('#list4').addRowData(r2.id, r2); // 16
}
var recordCount = jQuery("#list4").getGridParam("records");
if(direction === 'down' && currRow < recordCount)
{
var r1 = $('#list4').getRowData(currRow);
var r2 = $('#list4').getRowData(parseInt(currRow)+1);
$('#list4').delRowData(currRow);
$('#list4').delRowData(parseInt(currRow)+1);
temp = r1.id;
r1.id = r2.id;
r2.id = temp;
$('#list4').addRowData(r1.id, r1);
$('#list4').addRowData(r2.id, r2);
// $('#list4').setGridParam({sortname:'id'}).trigger('reloadGrid');
}
// Sort the table
$('#list4').setGridParam({sortname:'id'}).trigger('reloadGrid');
}
}
}
jqgrid代码：
var mandatoryFiled;
grid.jqGrid({
datastr: <%=jsonGridData%>,
datatype: "jsonstring",
height: 400,
colNames:['S No','Block/House No','Floor No', 'Unit No', 'Street Name',' 6- Digit Postal Code' ,'Trans Id','Address','Property Type','Area (sqm)','Date of Option Issued','Nett Price ($)','Gross Price ($)','Unit Price ($psf)','Nationality Of Buyer','Interested Party Transaction','Date of Option Aborted','Unit Status','listPriceFilter','salePriceFilter','sale_Date_Filter','aborted_Date_Filter','outlierFlag','row_Index'],
colModel:[
{name:'id',index:'id', width:40,align:"center", sorttype:"int"},
{name:'blkNo',index:'blkNo', width:100, align:"center",sorttype:"text",sortable:true,editable:true,editrules:{custom:true, custom_func:mandatoryChk}},
{name:'storey',index:'storey',align:"center",width:40,sorttype:"text",sortable:true,editable:true,
editrules:{custom:true, custom_func:mandatoryChk}},
{name:'unit_No',index:'unit_No', width:40,align:"center",sorttype:"text",editable:true,editrules:{custom:true,custom_func:mandatoryChk},onblur: 'submit'},
{name:'street_Name',index:'street_Name', width:60, align:"center",sorttype:"text",editable:true,editrules:{required:true}},
{name:'postal_code',index:'postal_code', width:60, align:"center",sorttype:"text",editable:true,editrules:{custom:true, custom_func:postalCode}},
// {name:'postal_code',index:'postal_code', width:60, align:"center",sorttype:"text",editable:true,editrules:{custom:true}},
{name:'trans_Id',index:'trans_Id', width:60, align:"center",sorttype:"text",editable:false},
{name:'address',index:'address', width:60, align:"center",sorttype:"text",editable:false},
{name:'property_Type',index:'property_Type', align:"center",width:80,sortable:true,
editable:true,edittype:"select",editoptions:{value:pptyTypeStr},formatter:'select',stype: 'select'
},
{name:'area',index:'area', width:50, align:"center",sorttype:"text",editable:true,
editrules:{custom:true, custom_func:myAreaCheck,number:true,required:true}},
{name:'sale_Date',index:'sale_Date',align:"center", width:75, sorttype:"date",sortable:true,editable:true,
editoptions: {
dataInit: function (element) {
$(element).datepicker({
dateFormat:"dd/mm/yy",
onSelect: function(dateText, inst) {
var $input = inst.input; // the datepicker input
var $row = $input.parents("tr");
$("#list4").jqGrid('saveRow',$row.attr("id"), false);
}
});
}
}},
// {name:'nett_Price',index:'nett_Price', width:80,align:"center",sorttype:"currency", formatter: 'currency',formatoptions: { thousandsSeparator: ", " , decimalPlaces: 0, defaultValue: '' }, editable:true ,editrules:{custom:true, custom_func:mynettpricecheck , number:true} },
{name:'nett_Price',index:'nett_Price', width:80,align:"center",sorttype:"text", editable:true, editrules:{custom:true, custom_func:mynettpricecheck }},
// {name:'sale_Price',index:'sale_Price', width:80,align:"center",sorttype:"currency", formatter: 'currency',formatoptions: { thousandsSeparator: ", " , decimalPlaces: 0},editable:true ,editrules:{custom:true, custom_func:mypricecheck,number:true}},
{name:'sale_Price',index:'sale_Price', width:80,align:"center",sorttype:"text", editable:true ,editrules:{custom:true, custom_func:mypricecheck} },
{name:'pricePSF',index:'pricePSF', width:80,align:"center",sorttype:"text", editable:false},
{name:'nationality_Code',index:'nationality_Code', width:80,align:"center",editable:true,sortable:true,
edittype:"select",formatter:'select',stype: 'select',
searchoptions:{
sopt: ['eq'],
dataInit:function(el){
var defOption = $("option:contains("+defaultCategory+")",el);
defOption.attr("selected", "selected");
setTimeout(function(){
$(el).trigger('change');
},500);
}
},
sorttype: function(cell, obj) {
return purchaserDtail[cell];
},
editoptions:{value:purchaserDtailStr}
},
{name:'interested',index:'interested', align:"center",width:70, sortable:true,editable:true,edittype:"select",formatter:'select',stype: 'select',editoptions:{value:interestedStr}},
{name:'dateAborted',index:'dateAborted',align:"center", width:75, sorttype:"date",sortable:true,editable:true,
editoptions: {
dataInit: function (element) {
$(element).datepicker({
dateFormat:"dd/mm/yy",
onSelect: function(dateText, inst) {
var $input = inst.input; // the datepicker input
var $row = $input.parents("tr");
$("#list4").jqGrid('saveRow',$row.attr("id"), false);
}
});
}
}},
{name:'unitStatus',index:'unitStatus', align:"center",width:60, sortable:true,editable:false},
{name:'listPriceFilter',index:'listPriceFilter', align:"center",width:40,editable:false},
{name:'salePriceFilter',index:'salePriceFilter', align:"center",width:40,editable:false},
{name:'sale_Date_Filter',index:'sale_Date_Filter', align:"center",width:40,editable:false},
{name:'aborted_Date_Filter',index:'aborted_Date_Filter', align:"center",width:40,editable:false},
{name:'outlierFlag',index:'outlierFlag', width:60, align:"center",sorttype:"text",editable:false} ,
{name:'row_Index',index:'row_Index', align:"center",width:40,editable:false,key:true}
],
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id"
},
editurl: "clientArray",
multiselect: true,
enableSearch: true,
pagination:true,
pager: '#search',
rowNum: 30,
rowList: [5, 10,20,30,40,50],
sortname: 'id',
sortorder: 'asc',
sortable:true,
viewrecords: true,
//page: 4,
loadonce: true,
//pgtext : "Page {0} of {1}",
emptyrecords:'No Records',
// loadtext:'Loading ...',
showpage:true,
caption: "Details of individual units",
headertitles: true,
cellEdit: true,
cellsubmit: 'clientArray',
grouping:true,
groupingView : {
groupField : ['address'],
groupColumnShow : [false],
groupText : ['<b>Address: {0} - {1} Transaction(s)</b>'],
groupCollapse : false,
groupOrder: ['asc'],
groupDataSorted : true
}
感谢
提升后，新网格应如下所示： 数据来自数据库，使用JSON进行
2 个答案:
答案 0 :(得分：0)
您没有发布创建网格的代码。目前还不清楚您是否持有本地数据或从服务器加载数据。此外，我不明白为什么需要在33和34之间移动地址35.我不明白address列的含义。
我建议你减少移动线的代码，只需重新加载网格。如果address列的值将被更改（在服务器上或客户端），那么行的顺序也将更改。
如果行的顺序与address列的值不同，则可以使用自定义的行排序。例如，在the answer中显示，可以通过实现定义为函数的sorttype来更改分组行的顺序。所以，如果你只是使用
sorttype: function (cellvalue, rowObject) {
if (String(cellvalue) === "35") {
return 34;
} else if (String(cellvalue) === "34") {
return 35;
}
return cellvalue;
}
然后重新加载网格将跟随address 34和35交换行。
答案 1 :(得分：0)
此代码适用于上移/下移：
function move(direction){
var selRowIds = getRowIDs('list4');
if(selRowIds.length == 0)
{
alert('Select Units to be moved '+direction);
}
else
{
if($('#list4').getGridParam('selrow')){
var ids = $('#list4').getDataIDs();
var temp = 0;
var currRow = $('#list4').getGridParam('selrow');
if(direction === 'up' && currRow > 1)
{
var r1 = $('#list4').getRowData(currRow-1);
var r2 = $('#list4').getRowData(currRow);
$('#list4').delRowData(currRow-1);
$('#list4').delRowData(currRow);
temp = r1.id; //16
r1.id = r2.id; // 17
r2.id = temp;// 16
$('#list4').addRowData(r1.id, r1); // 17
$('#list4').addRowData(r2.id, r2); // 16
}
var recordCount = jQuery("#list4").getGridParam("records");
if(direction === 'down' && currRow < recordCount)
{
var r1 = $('#list4').getRowData(currRow);
var r2 = $('#list4').getRowData(parseInt(currRow)+1);
$('#list4').delRowData(currRow);
$('#list4').delRowData(parseInt(currRow)+1);
temp = r1.id;
r1.id = r2.id;
r2.id = temp;
$('#list4').addRowData(r1.id, r1);
$('#list4').addRowData(r2.id, r2);
// $('#list4').setGridParam({sortname:'id'}).trigger('reloadGrid');
}
// Sort the table
$('#list4').setGridParam({sortname:'id'}).trigger('reloadGrid');
}
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？