un8.21:用html实现增删改查功能（代码篇）。
2024-05-19 15:36:38
在项目中，我们不仅要在后端代码实现增删改查的功能，前端也是必不可少的，那么在前端页面中应该如何实现完整的一套增删该查呢？
接下来附上代码，之后的文章里会有详解。
一、 在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"></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});}})});}三、测试（目前只展示查看功能，其他功能详解时具体展示）。
稍后我会为大家详解。
un8.21:用html实现增删改查功能（代码篇）。相关推荐
- easyui增删改查前段代码
easyui增删改查前段代码 <script>var url;//添加用户窗体 function newUser(){$('#dlg').dialog('open').dialog('se ...
- BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
- 使用EF框架实现MVC的增删改查功能！！！Entity Framework
一.什么是EF? ADO.NETEntity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案.ADO.NET Entity Fram ...
- 使用三层架构实现简单的MVC登陆操作！并实现基本的增删改查功能！！
一丶使用三层架构创建一个简单的MVC登录操作 1.首先,创建一个项目以及BLL层.DAL层.Entity层,如图一: 图一 2.创建一个数据库如图二: 图二 3基本工作已做好,接下来就编BLL层.DA ...
- ext store 数据修改_Go 数据存储篇（一）：基于内存存储实现数据增删改查功能...
在 Web 编程中,经常需要处理用户请求数据,而用户请求数据的处理往往又涉及到数据存储与获取,支持存储数据的媒介很多,包括内存.文件系统.数据库等,接下来,学院君将花几个篇幅的教程来系统介绍 Go W ...
- Online Coding开发模式 (通过在线配置实现一个表模型的增删改查功能，无需写任何代码)
JEECG 智能开发平台. 开发模式由代码生成器转变为Online Coding模式 (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...
- ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- bootstrap表格遍历_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
- molicode生成vue增删改查功能
2019独角兽企业重金招聘Python工程师标准>>> molicode生成vue增删改查功能 背景描述 当前生成的页面主要应用于VUE前端UI框架 iview: https://i ...
- Android 中编写一个简易购物车，商品包括商品名称，单价，数量，可以对商品进行增删改查功能。（ArrayList，SQLite）
Android 中编写一个简易购物车,商品包括商品名称,单价,数量,可以对商品进行增删改查功能.(ArrayList,SQLite) 布局(activity_main.xml): <?xml v ...
最新文章
- 创建表名作为参数的mysq存储过程【procedure】
- boost::type_index模块实现一个类型中获得简短的和人类可读的类型名称
- windbg调试堆破坏
- 动态修改网页icon图标
- java创建线程哪种方法最好_Java创建线程的三种方法比较
- spring注解之@Import注解的三种使用方式
- 程序员什么时候该考虑换工作
- Java :内部类基础详解
- Silverlight+WCF 新手实例 象棋 棋子移动-线交叉点(六)
- 木讷的程序员需要知道的事情 (四)
- android和ios手机换行,ios label中文与数字混合导致换行解决
- 【北亚数据恢复】raid损坏导致硬盘灯报警离线，存储无法使用的数据恢复
- flash中国官网显示可能损害计算机,重橙网络：Flash Player 中国官网最新版可解决使用异常的问题...
- WEB测试应该注意哪些地方，怎样才能做好WEB测试
- php裁剪上传图片生成缩略图
- Java基本计算方法
- 有关于中通公司需要提交的面试题答案
- 结构体 7.公共钥匙盒
- 计算机方向的研究生（转）
- UE4如何开启光线追踪Ray Tracing