在项目中，我们不仅要在后端代码实现增删改查的功能，前端也是必不可少的，那么在前端页面中应该如何实现完整的一套增删该查呢？

接下来附上代码，之后的文章里会有详解。

一、 在html中写出大概的页面，css自行设计，然后引入就可以。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--双核浏览器默认选择 WebKit 内核渲染-->
    <meta name="renderer" content="webkit">
    <title>境内律师信息列表</title>
    <!--公共css文件-->
    <link href="../../css/animate.css" rel="stylesheet" type="text/css">
    <link href="../../css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../../css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="../../css/plugins/iconfont/iconfont.css" rel="stylesheet" type="text/css">
    <!--// 表格插件-->
    <link href="../../css/plugins/jqgrid/ui.jqgridffe4.css" rel="stylesheet" type="text/css">
    <!--// 下拉列表插件-->
    <link href="../../css/plugins/bootstrap-select/bootstrap-select.css" rel="stylesheet" type="text/css">
    <!--// ztree插件-->
    <link href="../../css/plugins/ztree/metroStyle/metroStyle.css" rel="stylesheet" type="text/css">
    <link href="../../css/style.css" rel="stylesheet" type="text/css">
</head>

<body class="gray-bg" style="overflow-y: hidden">
<div class="wrapper wrapper-content  animated fadeInRight">
    <form id="searchForm" target="hidden_frame">
        <!--查询条件-->
        <div class="search-box clearfix">
            <div class="search_area_content">
                <div class="clearfix">
                    <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="lawyerPost" name="lawyerPost"
                                   maxlength="100"
                                   placeholder="请输入"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="search_area_btn">
                <div class="fr">
                    <button class="ipt-btn btnprimary mr5" type="button" id="queryButton"
                            onclick="queryProjectBaseInfoList()">查询
                    </button>
                    <button class="ipt-btn btndefault" type="button" onclick="resetSearchForm('searchForm')">
                        重置
                    </button>
                </div>
            </div>
        </div>
    </form>
    <iframe name='hidden_frame' id="hidden_frame" style="display: none"></iframe>
    <div class="content clearfix">
        <!--操作按钮
        <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>
    </div>
</div>

<script type="text/javascript" src="../../js/jquery.min.js"></script>

<!--引入公共js文件-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.form.js"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script type="text/javascript" src="../../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="../../js/plugins/jqgrid/i18n/grid.locale-cnffe4.js"></script>
<script type="text/javascript" src="../../js/plugins/jqgrid/jquery.jqGrid.minffe4.js"></script>
<script type="text/javascript" src="../../js/jqgrid.js"></script>
<script type="text/javascript" src="../../js/plugins/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../js/plugins/ztree/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript" src="../../js/plugins/ztree/jquery.ztree.exedit.min.js"></script>
<script type="text/javascript" src="../../js/plugins/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="../../js/zTreeTables.config.js"></script>
<script type="text/javascript" src="../../js/zTree.config.js"></script>
<script type="text/javascript" src="../../js/plugins/bootstrap-select/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/plugins/bootstrap-select/i18n/defaults-zh_CN.js"></script>
<script type="text/javascript" src="../../js/plugins/layer/layer.js"></script>
<script type="text/javascript" src="../../js/plugins/layDate/laydate.js"></script>
<script type="text/javascript" src="../../js/plugins/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../js/plugins/validate/messages_zh.js"></script>
<script type="text/javascript" src="../../js/pages/common/form-validate.js"></script>
<script type="text/javascript" src="../../js/core.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/contabs.js"></script>
<script type="text/javascript" src="../../js/hplus.js"></script>
<script type="text/javascript" src="../../js/jquery.cookie.js"></script>
<script type="text/javascript" src="../../js/pages/common/commonPopWin.js"></script>
<script type="text/javascript" src="../../css/plugins/iconfont/iconfont.js"></script>
<!-- 引入自己的js文件 -->
<script src="../../js/pages/lawyerterritory/queryLawyerTerritoryList.js"></script>
<script src="../../js/pages/common/message.js"></script>
<!--control.js-->
<script type="text/javascript" src="../../js/control.js"></script>
</body>
</html>

二、在js中传入接口和数据，代码如下。

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

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


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

    $JQGrid.init({
        "id": "lawyerAbroad-list-table",
        "useCheckAll": false,
        colNames: ['序号', '姓名', '法律工作角色', '所属组织', '信息更新时间'],// jqGrid的列显示名字
        colModel: [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
            {
                name: 'lawyerInfoId',
                index: 'lawyerInfoId',
                hidden: true,
            },
            {
                name: 'lawyerName',
                index: 'lawyerName',
                sortable: false,
                formatter: function (cellvalue, options, rowObject) {
                    return "<span class='grid-opt' onclick=detaiLawyerAbroad('" + rowObject.lawyerInfoId + "')>"+cellvalue+"</span>";
                }
            },
            {
                name: 'lawyerPost',
                index: 'lawyerPost',
                sortable: false,
            },
            {
                name: 'projectName',
                index: 'projectName',
                hidden: false,
            },
            {
                name: 'modifyTime',
                index: 'modifyTime',
                sortable: false,
            },
            /*{
                name: 'operation',
                index: 'operation',
                sortable: false,
                title: false,
                select: false,
                align: "center",
                formatter: function (cellvalue, options, rowObject) {
                    return "<span class='grid-opt' onclick=updateByPrimaryKeySelective('" + rowObject.lawyerInfoId + "')>编辑</span>"+
                        "<span class='grid-opt' onclick=removeLawyerAbroad('" + rowObject.lawyerInfoId + "')>删除</span>";
                }
            }*/],
        "dataUrl": "/lrm/lrmLawyerAbroad/queryProjectBaseInfoList",
        "datatype": "json",
        "data": objs,
        "jqObj": {
            "jsonReader": {
                "root": "data.list", page: "data.pageNum", total: "data.pages",
                records: "data.total", repeatitems: false, id: "lawyerInfoId"
            },// 设置返回数据格式
        }
    });
    closeMask();
}

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

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

//详情页面
function detaiLawyerAbroad(lawyerInfoId) {
    window.location.href = '/lrm/html/lawyerabroad/detailLawyerAbroad.html?lawyerInfoId=' + lawyerInfoId;
}
//律师信息添加
function insertLawyerAbroadInfo() {
    window.location.href = '/lrm/html/lawyerabroad/addLawyerAbroad.html?lawyerInfoId=';
}

//删除律师信息
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});
                }
            })
        });


}

三、测试（目前只展示查看功能，其他功能详解时具体展示）。

稍后我会为大家详解。

# 前端 # html # javascript
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

一文解读GaussDB(DWS)监控运维诊断优化能力

avatar 华为开发者空间
cover

GaussDB技术解读——GaussDB架构介绍（四）

avatar 华为开发者空间
cover

华为云数据仓库专业级开发者认证重磅发布

avatar 华为开发者空间