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>