jqgrid行内编辑，保存

编辑行，保存编辑，取消编辑

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) { //在行成功转为编辑模式下触发的事件，参数为此行数据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中的editurlmtype : "POST",extraparam : { // 额外 提交到后台的数据"param1" : "1","param2" : "2"},successfunc : function(XHR) { //在成功请求后触发;事件参数为XHR对象，需要返回true/false;alert(XHR.responseText);//接收后台返回的数据if (XHR.responseText == "false") {alert("上限值不能小于下限值");return false; //返回false会使用修改前的数据填充,同时关闭编辑模式。} else {alert("编辑成功");return true; //返回true会使用修改后的数据填充当前行,同时关闭编辑模式。}}//end successfunc}//end paramenterjQuery('#list').saveRow(rowId, parameter);}//第五步：定义取消操作function cancelParam(rowId) {jQuery('#list').restoreRow(rowId); //用修改前的数据填充当前行}

控制器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) {// 存入数据库,，返回tureSensor sensor = sensorService.findOne(id);sensor.setUpperLimit(upperLimit);sensor.setLowerLimit(lowerLimit);sensorService.save(sensor);return true;} else { // 返回falsereturn false;}}

参数详解
(1)url: 如果定义了改值，将会覆盖jqGrid中的editurl
如果url=”clientArray” 那么就不会向server端触发请求
(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'})})}

jqgrid行内编辑，保存相关推荐

jqgrid 行内编辑操作
最近一直在用jqgrid这个超好用的插件在做系统.现在是开始阶段,把用到的每个功能进行记录下来.在慢慢重构,封装,使其成为最快捷,最适合自己的强大工具. 先上图,看看实现的效果. 该功能实现修改删除在 ...
Dynamics 365新功能：可编辑的网格(行内编辑)
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复238或者20161127可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
JQuery Datatables editor 行内编辑功能
背景 ERP软件中,能进行行内编辑的表单是常用功能,行内编辑功能能让用户在表格中自己填写.修改.删除数据或者选择数据,可以说表格控件是ERP软件的核心控件,而行内编辑功能是核心中的关键. 本文会继续接 ...
Django项目：CRM(客户关系管理系统)--69--59PerfectCRM实现king_admin行内编辑
1 #base_admin.py 2 3 4 # --------24PerfectCRM实现King_admin自定义操作数据-------- 5 from django.shortcuts imp ...
雷林鹏分享jQuery EasyUI 数据网格 - 启用行内编辑
可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本教程向您展示如何创建一个数据网格(datagrid)和内 ...
雷林鹏分享：jQuery EasyUI 数据网格 - 启用行内编辑
jQuery EasyUI 数据网格 - 启用行内编辑可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...
bootstrap表格行编辑状态_JS表格组件BootstrapTable行内编辑解决方案x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
bootstrap表格行编辑状态_JS组件系列——BootstrapTable 行内编辑解决方案：x-editable...
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
bootstrapTable行内编辑----X-editable组件
阅读目录一.x-editable组件介绍二.bootstrapTable行内编辑初始方案三.bootstrapTable行内编辑最终方案 1.文本框 2.时间选择框 3.下拉框 4.复选框 5. ...

jqgrid行内编辑，保存

编辑行，保存编辑，取消编辑

如果编辑行的时候，给某个单元格绑定时间控件

jqgrid行内编辑，保存相关推荐

最新文章

热门文章