在项目中，我们不仅要在后端代码实现增删改查的功能，前端也是必不可少的，那么在前端页面中应该如何实现完整的一套增删该查呢？
接下来附上代码，之后的文章里会有详解。
一、在html中写出大概的页面，css自行设计，然后引入就可以。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><!--IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活ChromeFrame--><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><!--双核浏览器默认选择WebKit内核渲染--><metaname="renderer"content="webkit"><title>境内律师信息列表</title><!--公共css文件--><linkhref="../../css/animate.css"rel="stylesheet"type="text/css"><linkhref="../../css/bootstrap.min.css"rel="stylesheet"type="text/css"><linkhref="../../css/font-awesome.min.css"rel="stylesheet"type="text/css"><linkhref="../../css/plugins/iconfont/iconfont.css"rel="stylesheet"type="text/css"><!--//表格插件--><linkhref="../../css/plugins/jqgrid/ui.jqgridffe4.css"rel="stylesheet"type="text/css"><!--//下拉列表插件--><linkhref="../../css/plugins/bootstrap-select/bootstrap-select.css"rel="stylesheet"type="text/css"><!--//ztree插件--><linkhref="../../css/plugins/ztree/metroStyle/metroStyle.css"rel="stylesheet"type="text/css"><linkhref="../../css/style.css"rel="stylesheet"type="text/css"></head><bodyclass="gray-bg"style="overflow-y:hidden"><divclass="wrapperwrapper-contentanimatedfadeInRight"><formid="searchForm"target="hidden_frame"><!--查询条件--><divclass="search-boxclearfix"><divclass="search_area_content"><divclass="clearfix"><divclass="form-groupcol-xs-4no-padding-left"><labelclass="ivu-form-item-label-s">律师姓名：</label><divclass="ivu-form-item-content-s"><inputtype="text"class="ipt-type"id="lawyerName"name="lawyerName"maxlength="100"placeholder="请输入"/></div></div><divclass="form-groupcol-xs-4no-padding-left"><labelclass="ivu-form-item-label-s">法律工作角色：</label><divclass="ivu-form-item-content-s"><inputtype="text"class="ipt-type"id="lawyerPost"name="lawyerPost"maxlength="100"placeholder="请输入"/></div></div></div></div><divclass="search_area_btn"><divclass="fr"><buttonclass="ipt-btnbtnprimarymr5"type="button"id="queryButton"onclick="queryProjectBaseInfoList()">查询</button><buttonclass="ipt-btnbtndefault"type="button"onclick="resetSearchForm('searchForm')">重置</button></div></div></div></form><iframename='hidden_frame'id="hidden_frame"style="display:none"></iframe><divclass="contentclearfix"><!--操作按钮<divclass="tb-btn-boxclearfix"><divclass="fl"><buttonclass="tb-btn-flmr5"id="saveFieldConfId"onclick="insertLawyerAbroadInfo()"><iclass="iconiconfont"></i>新增</button></div></div>--><!--表格--><divclass="jqGrid_wrapper"><tableid="lawyerAbroad-list-table"></table></div></div></div><scripttype="text/javascript"src="../../js/jquery.min.js"></script><!--引入公共js文件--><scripttype="text/javascript"src="../../js/jquery.min.js"></script><scripttype="text/javascript"src="../../js/jquery.form.js"></script><scripttype="text/javascript"src="../../js/bootstrap.min.js"></script><scripttype="text/javascript"src="../../js/plugins/metisMenu/jquery.metisMenu.js"></script><scripttype="text/javascript"src="../../js/plugins/slimscroll/jquery.slimscroll.min.js"></script><scripttype="text/javascript"src="../../js/plugins/jqgrid/i18n/grid.locale-cnffe4.js"></script><scripttype="text/javascript"src="../../js/plugins/jqgrid/jquery.jqGrid.minffe4.js"></script><scripttype="text/javascript"src="../../js/jqgrid.js"></script><scripttype="text/javascript"src="../../js/plugins/ztree/jquery.ztree.core.js"></script><scripttype="text/javascript"src="../../js/plugins/ztree/jquery.ztree.excheck.min.js"></script><scripttype="text/javascript"src="../../js/plugins/ztree/jquery.ztree.exedit.min.js"></script><scripttype="text/javascript"src="../../js/plugins/ztree/jquery.ztree.all.min.js"></script><scripttype="text/javascript"src="../../js/zTreeTables.config.js"></script><scripttype="text/javascript"src="../../js/zTree.config.js"></script><scripttype="text/javascript"src="../../js/plugins/bootstrap-select/bootstrap-select.js"></script><scripttype="text/javascript"src="../../js/plugins/bootstrap-select/i18n/defaults-zh_CN.js"></script><scripttype="text/javascript"src="../../js/plugins/layer/layer.js"></script><scripttype="text/javascript"src="../../js/plugins/layDate/laydate.js"></script><scripttype="text/javascript"src="../../js/plugins/validate/jquery.validate.min.js"></script><scripttype="text/javascript"src="../../js/plugins/validate/messages_zh.js"></script><scripttype="text/javascript"src="../../js/pages/common/form-validate.js"></script><scripttype="text/javascript"src="../../js/core.js"></script><scripttype="text/javascript"src="../../js/common.js"></script><scripttype="text/javascript"src="../../js/contabs.js"></script><scripttype="text/javascript"src="../../js/hplus.js"></script><scripttype="text/javascript"src="../../js/jquery.cookie.js"></script><scripttype="text/javascript"src="../../js/pages/common/commonPopWin.js"></script><scripttype="text/javascript"src="../../css/plugins/iconfont/iconfont.js"></script><!--引入自己的js文件--><scriptsrc="../../js/pages/lawyerterritory/queryLawyerTerritoryList.js"></script><scriptsrc="../../js/pages/common/message.js"></script><!--control.js--><scripttype="text/javascript"src="../../js/control.js"></script></body></html>二、在js中传入接口和数据，代码如下。
varuserInfo={};userInfo=getTopWindow().userInfo;$(function(){//初始化表格loadInit();});//初始化表格functionloadInit(){loadMask();varobjs=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"<spanclass='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"<spanclass='grid-opt'onclick=updateByPrimaryKeySelective('"rowObject.lawyerInfoId"')>编辑</span>""<spanclass='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();}//查询functionqueryProjectBaseInfoList(){//查询列表varobjs=fromToJson("searchForm");//定义一个对象存放保存对象$JQGrid.search("lawyerAbroad-list-table",objs);}//律师信息编辑functionupdateByPrimaryKeySelective(lawyerInfoId){window.location.href='/lrm/html/lawyerabroad/updateLawyerAbroad.html?lawyerInfoId='lawyerInfoId;}//详情页面functiondetaiLawyerAbroad(lawyerInfoId){window.location.href='/lrm/html/lawyerabroad/detailLawyerAbroad.html?lawyerInfoId='lawyerInfoId;}//律师信息添加functioninsertLawyerAbroadInfo(){window.location.href='/lrm/html/lawyerabroad/addLawyerAbroad.html?lawyerInfoId=';}//删除律师信息functionremoveLawyerAbroad(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});}})});}三、测试（目前只展示查看功能，其他功能详解时具体展示）。
稍后我会为大家详解。
访客