jqgrid表格单行新增,单行编辑,单行删除

前言

之前公司使用jqgrid的新增修改都是基于单条数据弹一个框进行插入/修改数据库后,返回表格进行刷新来实现的。

最近有一个需求想让直接在页面上进行编辑单条数据,新增直接新增在表格上进行操作然后保存。

查阅了jqgrid的api之后找到了如下方法:

//新增行:

$("#jqGrid").jqGrid("addRowData", id, dataRow, "first");

#jqGrid表示jqgrid表格的ID,addRowData表示新增一行数据,id表示这一行数据在此表格中的主键,dataRow表示新增的这一行数据的结构,最后面的字段表示新增在表格的第一行(也可以设置end,新增在最后一行);

//新增行demo:

var dataRow = {
    "transaction_name" : "",
    "create_time" : "",
};
$("#jqGridIncome").jqGrid("addRowData", -1, dataRow, "first");

我这边是直接将ID设置为-1,后续加入限制保证-1的唯一性。

//编辑行:

$("#jqGridIncome").jqGrid('editRow', rowId); 

rowId表示编辑行的id,前提得设置该行数据字段可编辑。如下:

{ label: '交易方名称', name: 'transaction_name' , width: 100,sortable: false,editable: true,edittype:'text'},

加入editable: true edittype:'text',设置可编辑,并且编辑类型为text。这样调用editRow之后就可以实现改行可编辑了。

//删除行:

$("#jqGridIncome").jqGrid("delRowData", rowId);

rowId表示编辑行的id,该操作可以删除页面上的单行数据,可以配合新增之后的取消来同步使用,如果要操作到数据库还是得写请求到后台去。

实现效果

//配合使用的demo:

//添加
function addIncomeRowData(){
    if($("#jqGridIncome").find(".editable").length > 0){ //存在编辑状态的行
        alertMsg("存在未保存的数据,请操作完成后进行编辑!");
        return;
    }
    var dataRow = {
        "transaction_name" : "",
        "create_time" : "",
    };
    $("#jqGridIncome").jqGrid("addRowData", -1, dataRow, "first");
    editIncomeParam(-1);//新增一行之后,直接进入编辑状态
}
//编辑
function editIncomeParam(rowId) {
    if($("#jqGridIncome").find(".editable").length > 0){ //存在编辑状态的行
		alertMsg("存在未保存的数据,请操作完成后进行编辑!");
		return;
	}
	$("#jqGridIncome").jqGrid('editRow', rowId); //开启该行的编辑
}
//取消
function cancelIncomeParam(rowId) {
    if(rowId == -1){ //如果是刚刚新建了一行数据点了取消
        $("#jqGridIncome").jqGrid("delRowData", rowId); //删除当前行
        return;
    }
    jQuery('#jqGridIncome').restoreRow(rowId); //用修改前的数据填充当前行
}
//保存
function saveIncomeParam(rowId){
    if($("#"+rowId+"_transaction_name").val().length == 0){ //保存前的验证
        alertMsg("交易方名称不可为空!");
        return;
    }
    var parameter = {
        url : "xxxxxx",
        mtype : "POST",
        extraparam : {
            //可以加入额外参数
        },
        successfunc : function(data) {
            //返回true会使用修改后的数据填充当前行,否则使用修改前的数据填充,同时关闭编辑模式
            return true;
        }
    }
    //saveRow方法会把rowId行的数据作为参数调用parameter里面的请求
    jQuery('#jqGridIncome').saveRow(rowId, parameter);
    reloadIncomeGrid(); //重新加载表格
}

如果此文章对你有帮助或者有任何疑点欢迎在评论区进行讨论,

我非常乐意帮各位解决我能力之内的事情!

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以通过以下步骤设置 jqGrid 表格样式: 1. 引入 jqGrid 插件和样式文件。 ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/css/ui.jqgrid.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/js/jquery.jqgrid.min.js"></script> ``` 2. 在 HTML 页面中添加一个 div 元素作为表格容器。 ``` <div id="grid"></div> ``` 3. 使用 JavaScript 代码初始化 jqGrid 表格并设置样式。 ``` $(function(){ $("#grid").jqGrid({ url: "data.json", datatype: "json", colModel: [ { name: "id", label: "ID", width: 50 }, { name: "name", label: "Name", width: 150 }, { name: "age", label: "Age", width: 50 }, { name: "address", label: "Address", width: 200 } ], rowNum: 10, rowList: [10, 20, 30], pager: "#pager", sortname: "id", viewrecords: true, sortorder: "asc", caption: "Sample Grid" }); $("#grid").jqGrid("navGrid", "#pager", { edit: false, add: false, del: false }); }); ``` 4. 在 CSS 文件中添加样式。 ``` .ui-jqgrid { font-size: 14px; } .ui-jqgrid tr.jqgrow td { padding: 5px; } .ui-jqgrid .ui-jqgrid-hdiv { background-color: #f2f2f2; } .ui-jqgrid .ui-jqgrid-btable { border-collapse: separate; border-spacing: 0px; } .ui-jqgrid .ui-jqgrid-pager { background-color: #f2f2f2; border-top: none; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table { margin: 0; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button { border: none; margin: 0 5px; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button:hover { background-color: #e6e6e6; } ``` 注意:样式文件中的样式可以根据需要进行修改,以上只是一个示例。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值