un8.22:用jQuery实现增删改查功能。

做项目的时候，我们难免会用到各种各样的技术，今天我就来和大家分享一下如何用jQuery来实现增删改查。

一、创建一个html，把写好的css样式、js样式引入，从上到下开始执行，如果有误，则下方的全部不执行，表头也要记得写哦。

<title>预算填报任务列表</title>

二、在body中写方法，也是从上到下。

1、查询条件。

<div class="form-group col-xs-4 no-padding-left">
                        <label class="ivu-form-item-label-s">律师姓名：</label>
                        <div class="ivu-form-item-content-s">
                            <input type="text" class="ipt-type" id="lawyerName" name="lawyerName"
                                   maxlength="100"
                                   placeholder="请输入"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-4 no-padding-left">
                        <label class="ivu-form-item-label-s">项目：</label>
                        <div class="ivu-form-item-content-s">
                            <input type="text" class="ipt-type" id="projectName" name="projectName"
                                   maxlength="100"
                                   placeholder="请输入"/>
                        </div>
                    </div>

2、搜索和重置功能。

<button class="ipt-btn btnprimary mr5" type="button" id="queryButton"
                            onclick="queryProjectBaseInfoList()">查询
                    </button>
                    <button class="ipt-btn btndefault" type="button" onclick="resetSearchForm('searchForm')">
                        重置
                    </button>

3、新增功能。

<div class="tb-btn-box clearfix">
            <div class="fl">
                <button class="tb-btn-fl mr5" id="saveFieldConfId" onclick="insertLawyerAbroadInfo()">
                    <i class="icon iconfont">&#xe613;</i>新增
                </button>
            </div>
        </div>

三、定义表格。

<!--表格-->
        <div class="jqGrid_wrapper">
            <table id="lawyerAbroad-list-table">
            </table>
        </div>

四、创建js文件。

1、定义一个全局变量。

var userInfo = {};
userInfo = getTopWindow().userInfo;

2、调用初始化表格的方法。

$(function () {
    // 初始化表格
    loadInit();
});

3、创建方法。

// 初始化表格
function loadInit() {
    loadMask();//调用一个函数
    var objs = fromToJson("searchForm"); // 定义一个对象 存放保存对象

4、封装一个表格。

 $JQGrid.init({
        "id": "lawyerAbroad-list-table",
        "useCheckAll": false,
        colNames: ['序号',  '姓名'],// jqGrid的列显示名字
        colModel: [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
            {
                name: 'lawyerInfoId',
                index: 'lawyerInfoId',
                hidden: true,
            },
            {
                name: 'projectName',
                index: 'projectName',
                sortable: false,
            }
          }],

5、如果需要跳转页面的话，直接设置一个路径就可以，如下。

{
                name: 'projectName',
                index: 'projectName',
                sortable: false,
                formatter: function (cellvalue, options, rowObject) {
                    return "<span class='grid-opt' onclick=detaiLawyerAbroad('" + rowObject.lawyerInfoId + "')>"+cellvalue+"</span>";
                }
            },

6、操作键，编辑和删除。

formatter: function (cellvalue, options, rowObject) {
                    return "<span class='grid-opt' onclick=updateByPrimaryKeySelective('" + rowObject.lawyerInfoId + "')>编辑</span>"+
                        "<span class='grid-opt' onclick=removeLawyerAbroad('" + rowObject.lawyerInfoId + "')>删除</span>";
                }

7、请求的参数及地址。

"dataUrl": "/lrm/lrmLawyerAbroad/queryProjectBaseInfoList",
        "datatype": "json",
        "data": objs,

8、请求返回的数据格式。

"jqObj": {
            "jsonReader": {
                "root": "data.list", page: "data.pageNum", total: "data.pages",
                records: "data.total", repeatitems: false, id: "lawyerInfoId"
            },// 设置返回数据格式
        }

9、关闭。

closeMask();

五、写方法。

1、查询。

//查询
function queryProjectBaseInfoList() {
    // 查询列表
    var objs = fromToJson("searchForm"); // 定义一个对象 存放保存对象
    $JQGrid.search("lawyerAbroad-list-table", objs);
}

2、新增。

//律师信息添加
function insertLawyerAbroadInfo() {
    window.location.href = '/lrm/html/lawyerabroad/addLawyerAbroad.html';
}

3、详情。

//详情页面
function detaiLawyerAbroad(lawyerInfoId) {
    window.location.href = '/lrm/html/lawyerabroad/detailLawyerAbroad.html?lawyerInfoId=' + lawyerInfoId;
}

4、编辑。

//律师信息编辑
function updateByPrimaryKeySelective(lawyerInfoId) {
    window.location.href = '/lrm/html/lawyerabroad/updateLawyerAbroad.html?lawyerInfoId=' + lawyerInfoId;
}

5、删除。

//删除律师信息
function removeLawyerAbroad(lawyerInfoId) {
    layer.confirm("确定删除？", {
            icon: 3,
            title: '提示'
        },
        function () {
            // 确认后处理的事情，这里写入你要进行的操作：数据处理等；
            $.ajax({
                url: "/lrm/lrmLawyerAbroad/removeLawyerAbroad",
                type: 'post',
                async: false,
                data: {"lawyerInfoId": lawyerInfoId},
                success: function (data) {
                    if (data && data.returnValue) {
                        layer.msg(message.delSuccess, {
                                time: 1500,
                                icon: 1
                            },
                            function () {
                                loadInit();
                            });
                    } else {
                        layer.msg(data.msg, {
                                time: 1500,
                                icon: 2
                            },
                            function () {
                            });
                    }
                },
                error: function () {
                    layer.msg(message.sysError, {time: 2000, icon: 2});
                }
            })
        });
}

如此我们便实现了增删改查功能。