JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

html

<table id="productDg"></table>

<!-- 表格工具栏开始 -->
<div id="productDg-toolbar" class="topjui-toolbar"
     data-options="grid:{
           type:'datagrid',
           id:'productDg'
       }">
    <a id="add" href="javascript:void(0)">新增</a>
    <a id="edit" href="javascript:void(0)">编辑</a>
    <a id="delete" href="javascript:void(0)">删除</a>

    <form id="queryForm" class="search-box">
        <input type="text" name="name" data-toggle="topjui-textbox"
               data-options="id:'name',prompt:'产品名称',width:100">
        <input type="text" name="code" data-toggle="topjui-textbox"
               data-options="id:'code',prompt:'产品型号',width:100">
        <a id="queryBtn" href="javascript:void(0)">查询</a>
    </form>
</div>
<!-- 表格工具栏结束 -->

<!-- 表格行编辑窗口 -->
<form id="editDialog"></form>

　　js

//进度条创建
function progressFormatter(value, rowData, rowIndex) {
        var htmlstr = '<div id="p" class="topjui-progressbar progressbar" data-options="value:' + value + '" style="width: 398px; height: 26px;">';
        htmlstr += '<div class="progressbar-text" style="width: 398px; height: 26px; line-height: 26px;">' + value + '%</div>';
        htmlstr += '<div class="progressbar-value" style="width: ' + value + '%; height: 26px; line-height: 26px;">';
        htmlstr += '<div class="progressbar-text" style="width: 398px; height: 26px; line-height: 26px;">' + value + '%</div>';
        htmlstr += '</div>';
        htmlstr += '</div>';
        return htmlstr;
}
//删除操作创建
function operateFormatter(value, row, index) {
     var htmlstr = '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteRow(\'' + row.uuid + '\')">删除</button>';
     return htmlstr;
}


//数据表格创建

$(function () {
    var productDg = {
        type: 'datagrid',
        id: 'productDg'
    };

    $("#productDg").iDatagrid({
        fitColumns:true,
        remoteSort:false,
        url: '../../json/datagrid/product-list.json',
        frozenColumns: [[
            {field: 'name', title: '商品名称', sortable: true},
            {field: 'code', title: '商品编号', sortable: true}
        ]],
        columns: [[
            {field: 'uuid', title: 'UUID', checkbox: true},
            {field: 'spec', title: '规格型号', sortable: true},
            {field: 'sale_price', title: '销售单价', sortable: true},
            {field: 'rate', title: '完成率', sortable: true, formatter: progressFormatter},
            {field: 'operate', title: '操作', formatter: operateFormatter, width:100}
        ]],
        filter: [{
            field: 'name',
            type: 'textbox',
            op: ['contains', 'equal', 'notequal', 'less', 'greater']
        }, {
            field: 'code',
            type: 'combobox',
            options: {
                valueField: 'label',
                textField: 'value',
                data: [{
                    label: '2103',
                    value: '2103'
                }, {
                    label: '5103',
                    value: '5103'
                }, {
                    label: '1204',
                    value: '1204'
                }]
            },
            op: ['contains', 'equal', 'notequal', 'less', 'greater']
        }, {
            field: 'spec',
            type: 'combobox',
            options: {
                valueField: 'label',
                textField: 'value',
                multiple: true,
                data: [{
                    label: 'KC-W200SW',
                    value: 'KC-W200SW'
                }, {
                    label: '白色LR-1688BY-2',
                    value: '白色LR-1688BY-2'
                }, {
                    label: '银灰色BCD-339WBA 339',
                    value: '银灰色BCD-339WBA 339'
                }]
            },
            op: ['contains', 'equal', 'notequal', 'less', 'greater']
        }]
    });


    //新增事件
    $("#add").iMenubutton({
        method: 'openDialog',
        extend: '#productDg-toolbar',
        iconCls: 'fa fa-plus',
        btnCls: 'topjui-btn-blue',
        dialog: {
            id: 'userAddDialog',
            title: '多选项卡布局的表单',
            href: _ctx + '/html/complex/dialog_add.html', //对话框路径
            buttonsGroup: [
                {
                    text: '保存',
                    url: _ctx + '/json/response/success.json',
                    iconCls: 'fa fa-plus',
                    handler: 'ajaxForm',
                    btnCls: 'topjui-btn-brown'
                }
            ]
        }
    });

    //编辑事件

    $("#edit").iMenubutton({
        method: 'openDialog',
        extend: '#productDg-toolbar',
        iconCls: 'fa fa-pencil',
        btnCls: 'topjui-btn-green',
        grid: productDg,
        dialog: {
            title: '普通布局的表单',
            height: 550,
            href: _ctx + '/html/complex/dialog_edit.html?uuid={uuid}',  //打开对话框路径
            url: _ctx + '/json/datagrid/product-detail.json?uuid={uuid}',
            buttonsGroup: [
                {
                    text: '更新',
                    url: _ctx + '/json/response/success.json',
                    iconCls: 'fa fa-save',
                    handler: 'ajaxForm',
                    btnCls: 'topjui-btn-green'
                }
            ]
        }
    });

　　// 表格工具栏删除事件
    $("#delete").iMenubutton({
        method: 'doAjax',
        extend: '#productDg-toolbar',
        iconCls: 'fa fa-trash',
        btnCls: 'topjui-btn-brown',
        confirmMsg: '这个是勾选复选框实现多条数据的Ajax删除提交操作，提交grid.param中指定的参数值',
        grid: {
            type: 'datagrid',
            id: 'productDg',
            uncheckedMsg: '请先勾选要删除的数据',
            param: 'uuid:uuid,code:code'
        },
        url: _ctx + '/json/response/success.json'
    });
　　
　　//查询操作
    $('#queryBtn').iMenubutton({
        method: 'query',
        iconCls: 'fa fa-search',
        btnCls: 'topjui-btn-blue',
        form: {id: 'queryForm'},
        grid: {type: 'datagrid', 'id': 'productDg'}
    });
});

//表格行删除
function deleteRow(uuid) {
    $.iMessager.confirm('确认对话框', '您确定删除所选的数据？', function (r) {
        if(r){
            var postData = { uuid: uuid}; // 请求中携带的JSON数据
            var url =  _ctx + '/json/response/failure.json';//请求的地址
            $.post(url,postData,function (res) {
                $.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
                if(res.statusCode == 200){
                    $("#productDg").iDatagrid('reload');//请求成功后刷新表格
                }
            },"JSON")
        }
    });
    // $.iMessager.alert('操作提示', '请根据具体情况编写代码，如ajax删除请求，请求失败提示，请求成功提示，请求成功后刷新表格等！', 'messager-info');
}

　　具体的功能实现根据需求来。

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

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

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