編輯行，保存編輯，取消編輯
html代碼
<div class="panel-body">
<table id="list" style="heigth: 1000px"></table>
<div id="pager"></div>
</div>
js代碼
$("#list" ).jqGrid({
colModel : [ //jqGrid每一列的配置信息。包括名字，索引，寬度,對齊方式.....
{name : 'id',index : 'id',width : 100,align : 'right'},
//第一步：把upperLimit列設置可編輯
{name : 'upperLimit',index : 'upperLimit',width : 150,align : "right",editable : true},
{name : 'lowerLimit',index : 'lowerLimit',width : 150,align : "right",editable : true},
{name : 'edit',index : 'edit',width : 100,height : 300,align : "right"}],
gridComplete : function() { // 第二步：數據加載完成后 添加操作按鈕
var ids = jQuery("#list").jqGrid('getDataIDs'); //獲取表格的所有列
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var editBtn = "<div class='btnBox'> "
+ "<button type='button' onclick='editParam("
+ id
+ ")'>編輯</button>"
+ "<button type='button' onclick='saveParam("
+ id
+ ")'>保存</button>"
+ "<button type='button' onclick='cancelParam("
+ id + ")'>取消</button> </div>"
jQuery("#list").jqGrid('setRowData',ids[i], {edit : editBtn}); //給每一列添加操作按鈕
}//end for (var i = 0; i < ids.length; i++)
}
})
function editParam(rowId) { //第三步：定義編輯操作
var parameter = {
oneditfunc : function(rowid) { //在行成功轉為編輯模式下觸發(fā)的事件，參數為此行數據id
//alert("edited" + rowid);
}}
jQuery("#list").editRow(rowId);//開啟可編輯模式
//jQuery("#list").editRow(rowId,parameter); //如果需要參數
jQuery('#list' ).jqGrid('editRow', rowId, true,pickdates);//開啟可編輯模式
}
//第四步：定義保存操作，通過鍵值對把編輯的數據傳到后臺,如下
//{upperLimit: value1,lowerLimit:value2}
function saveParam(rowId) {
var parameter = {
url : "sensor/setParam", //代替jqgrid中的editurl
mtype : "POST",
extraparam : { // 額外 提交到后臺的數據
"param1" : "1",
"param2" : "2"
},
successfunc : function(XHR) { //在成功請求后觸發(fā);事件參數為XHR對象，需要返回true/false;
alert(XHR.responseText);//接收后臺返回的數據
if (XHR.responseText == "false") {
alert("上限值不能小于下限值");
return false; //返回false會使用修改前的數據填充,同時關閉編輯模式。
} else {
alert("編輯成功");
return true; //返回true會使用修改后的數據填充當前行,同時關閉編輯模式。
}
}//end successfunc
}//end paramenter
jQuery('#list').saveRow(rowId, parameter);
}
//第五步：定義取消操作
function cancelParam(rowId) {
jQuery('#list').restoreRow(rowId); //用修改前的數據填充當前行
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
控制器Java代碼
/** 設置傳感器的參數
主要看控制器方法怎么接受參數，怎么返回值 **/
@RequiresPermissions("sensor:create")
@ResponseBody
@RequestMapping(value = "sensor/setParam", method = RequestMethod.POST)
public boolean setParam(Model model, long id, Float upperLimit, Float lowerLimit,String param1,String param2) {
if (upperLimit > lowerLimit) {// 存入數據庫,，返回ture
Sensor sensor = sensorService.findOne(id);
sensor.setUpperLimit(upperLimit);
sensor.setLowerLimit(lowerLimit);
sensorService.save(sensor);
return true;
} else { // 返回false
return false;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
參數詳解
(1)url: 如果定義了改值，將會覆蓋jqGrid中的editurl
如果url=”clientArray” 那么就不會向server端觸發(fā)請求
(2)extraparam:請求參數列表
(3)successfunc :在請求成功調用后立即返回，該函數簽名包括server返回的數據。同時該函數需要返回tue/false
如果編輯行的時候，給某個單元格綁定時間控件
function editParam(rowId) { //第三步：定義編輯操作
//開啟可編輯模式，并且把參數rowId傳給函數pickdates()
jQuery('#list' ).jqGrid('editRow', rowId, true,pickdates);
}
function pickdates(id) {
//***jqgrid中單元格的id是 行號_列名***
//給id為list的表格 的第id行的upperLimit列 添加click事件,綁定時間控件
jQuery("#" + id + "_upperLimit", "#list" ).bind("click",
function() {
WdatePicker({
dateFmt : 'HH:mm'
})
});
//給id為list的表格 的第id行的upperLimit列 添加click事件,綁定時間控件
jQuery("#" + id + "_lowerLimit", "#list").bind("click",
function() {
WdatePicker({
dateFmt : 'HH:mm'
})
})
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
