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

忘是亡心i 2023-10-11 18:15 12阅读 0赞

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

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

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

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

1、查询条件。

2、搜索和重置功能。

3、新增功能。

三、定义表格。

<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});
                    }
                })
            });
    }

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