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