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>

  

jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

效果展示:

jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

新增

jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

删除

(在选中一行的时候执行,否则它会提示你没有选中要删除的数据)

jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

编辑

jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

查询

jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

仅仅一点点html代码,不用写js 就可以动态加载表格数据并且实现基本的增删改查功能,是不是特别简单呢。嘿嘿,这就是topjui的强大之处,里面的方法都是封装好的,直接调用组件的功能就OK了,当然你也可以自己写方法实现。后期会慢慢更新一些demo,敬请关注!

想了解topjui的朋友可以点击下方链接前往体验哦

 

  EasyUI中文网:http://www.jeasyui.cn

  TopJUI前端框架:http://www.topjui.com

  TopJUI交流社区:http://ask.topjui.com

上一篇:利用EasyUI 数据网格(DataGrid)的loader属性实现后端分页


下一篇:easyui—element-ui框架套用(表格宽度自适应)