jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）
jQuery EasyUI/TopJUI数据表格的增删改查功能（不写js,纯HTML实现!!!）
废话不多说，直接贴上代码
<table id="configEdatagrid" data-toggle="topjui-edatagrid"data-options="id:'configEdatagrid',idField:'uuid',reloadAfterSave:true,url:'../../json/config/config_1.json', //获取表格数据地址saveUrl:_ctx + '/json/response/save.json', //保存updateUrl:_ctx + '/json/response/update.json', //更新destroyUrl:_ctx + '/json/response/delete.json'"> //删除<thead><tr><th data-options="field:'uuid',title:'UUID',checkbox:true"></th><th data-options="field:'type',title:'类型',sortable:true,editor:{type:'textbox',options:{required:true,height:30}}"></th><th data-options="field:'sort',title:'排序',sortable:true,editor:{type:'numberspinner',options:{required:true,height:30}}"></th><th data-options="field:'name',title:'名称',sortable:true,editor:{type:'textbox',options:{required:true,height:30}}"></th><th data-options="field:'code',title:'代码',sortable:true,editor:{type:'textbox',options:{required:true,height:30}}"></th><th data-options="field:'value',title:'值',sortable:true,editor:{type:'textbox',options:{required:true,height:30}}"></th><th data-options="field:'description',title:'描述',sortable:true,editor:{type:'textbox',options:{required:true,height:30}}"></th><th data-options="field:'creator',title:'创建人',sortable:true"></th><th data-options="field:'createTime',title:'创建时间',sortable:true"></th></tr></thead>
</table><!-- 表格工具栏 -->
<div id="configEdatagrid-toolbar" data-options="grid:{type:'edatagrid',id:'configEdatagrid'}" class="topjui-toolbar"><a href="javascript:void(0)"data-toggle="topjui-menubutton"data-options="method:'edatagrid',extend: '#configEdatagrid-toolbar',iconCls:'fa fa-plus',btnCls:'topjui-btn-green',type:'addRow'">新增</a><a href="javascript:void(0)"data-toggle="topjui-menubutton"data-options="method:'edatagrid',extend: '#configEdatagrid-toolbar',iconCls:'fa fa-save',btnCls:'topjui-btn-brown',type:'saveRow'">保存</a><a href="javascript:void(0)"data-toggle="topjui-menubutton"data-options="method:'edatagrid',extend: '#configEdatagrid-toolbar',iconCls:'fa fa-remove',btnCls:'topjui-btn-black',type:'cancelRow'">取消</a><a href="javascript:void(0)"data-toggle="topjui-menubutton"data-options="method:'edatagrid',extend: '#configEdatagrid-toolbar',iconCls:'fa fa-remove',btnCls:'topjui-btn-blue',type:'destroyRow'">删除</a><a href="javascript:void(0)"data-toggle="topjui-menubutton"data-options="method:'filter',extend: '#configEdatagrid-toolbar',btnCls:'topjui-btn-black'">过滤</a><a href="javascript:void(0)"data-toggle="topjui-menubutton"data-options="method:'search',extend: '#configEdatagrid-toolbar',btnCls:'topjui-btn-blue'">查询</a>
</div>效果展示：
新增
删除
（在选中一行的时候执行，否则它会提示你没有选中要删除的数据）
编辑
查询
仅仅一点点html代码，不用写js 就可以动态加载表格数据并且实现基本的增删改查功能，是不是特别简单呢。嘿嘿，这就是topjui的强大之处，里面的方法都是封装好的，直接调用组件的功能就OK了，当然你也可以自己写方法实现。后期会慢慢更新一些demo，敬请关注！
想了解topjui的朋友可以点击下方链接前往体验哦
EasyUI中文网：http://www.jeasyui.cn
TopJUI前端框架：http://www.topjui.com
TopJUI交流社区：http://ask.topjui.com
jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）相关推荐
- python增删改查的框架layui_spring+springMvc+mybatis+layui实现数据表格的增删改查（纯layui实现）...
[实例简介] 项目描述: 这是通过ssm+layui 实现的简单的对数据表格的增删改查,所有页面纯由layui实现. 如果你是新手学习layui,那这个绝对会对你有很大的帮助: 如果你之前已经学过甚至 ...
- 对表格实现修改查询html,【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id=&q ...
- 09 动态树+数据表格+分页+增删改
前言 这篇文章是继上一篇文章的增删改查功能的实现 一.动态树 效果图 我们将在上一次课中的LeftAside.vue中完成动态树的实现 主要代码在Element官网 NavMenu 导航菜单中的侧栏 ...
- BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
- bootstrap表格遍历_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
- bootstrap 获取表格修改的结果_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
- python对excel增删改查语句_利用python模拟sql语句对员工表格进行增删改查
本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询, ...
- python对excel增删改查_利用python模拟sql语句对员工表格进行增删改查
本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询, ...
- js实现表格的增删改查
这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...
最新文章
- 2017年50道Java线程面试题
- 苏大JAVA题库_苏州大学Java程序设计课程试卷含答案(B)
- php访问获取全部网站状态码,php打开其他网站获取状态码
- equals属于mysql语句吗_equals和==的区别 （Java基础）
- SQLyog连接Mysql8.0提示 Authentication plugin ‘caching_sha2_password‘ cannot be loaded
- 如何让博客变得稍稍好看
- C语言算小数加减,C语言带小数加减乘除.doc
- 罗永浩从交个朋友拿走“天价”分手费？将进军AR行业：创业三部曲之三即将开拍...
- 微信小程序排行榜模板
- 微信运营必须收藏的软件工具网站合集
- 毕业论文 | 文献综述应该怎么写
- 网易云音乐推出异乡人年度企划：不同圈层音乐人演绎他乡故事
- 排卵计算机在线,排卵期（排卵日计算器在线查询）
- Android Studio连接不到MuMu模拟器；
- pc端常用电脑屏幕 媒体查询尺寸
- 埃默里大学(Emory University)计算机系招收NLP方向博士生啦~
- oracle备份数据库dmp定时,SCO Unix系统下定时备份Oracle数据库dmp文件的设置
- 关于使用[MASK]做完形填空时需要注意的点
- 迪米特法则理解+感悟
- 股市逃顶的技巧和方法