JQuery Easyui / TopJUI create data tables with JS and implement CRUD functions

JQuery Easyui / TopJUI create data tables with JS and implement CRUD functions

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)"> query </a> 
    </ form> 
</ div> 
<! - end table toolbar -> 

<! - edit window table row -> 
<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>';
// Create a deletion
}
        return htmlStr;
        htmlStr + = '</ div>';
        + = htmlStr '</ div>';
operateFormatter function (value, Row, index) {
     var htmlstr = '<button class = "layui-btn layui-btn-xs layui-btn-danger" onclick = "deleteRow (\' '+ row.uuid +' \ ')"> Delete </ Button>'; 
     return htmlStr; 
} 


// create a data table

$(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: 'Sales price ', 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: 'White-1688BY-2 the LR', 
                    value: 'White-1688BY-2 the LR' 
                }, { 
                    label: 'silver-339WBA 339 the BCD', 
                    value: 'silver-339WBA 339 the BCD' 
                }] 
            }, 
            OP : [ 'the contains', 'equal', 'NotEqual', 'less', 'Greater'] 
        }] 
    }); 


    // Add event 
    $ ( "the Add #") iMenubutton ({. 
        Method: 'OpenDialog', 
        Extend : '# productDg-Toolbar', 
        iconCls: 'FA FA-PLUS', 
        btnCls: 'topjui-BTN-Blue', 
        Dialog: { 
            ID: 'userAddDialog',
            title: 'Multi-tab layout form'
            href: _ctx + '/html/complex/dialog_add.html', // dialog path 
            buttonsGroup: [ 
                { 
                    text: 'Save', 
                    URL: _ctx + '/json/response/success.json', 
                    iconCls: 'FA FA -plus ', 
                    Handler:' ajaxForm ', 
                    btnCls:' topjui-BTN-Brown ' 
                } 
            ] 
        } 
    }); 

    // editing events 

    $ ( "# edit") iMenubutton ({. 
        Method:' OpenDialog ', 
        Extend:' # Toolbar-productDg ', 
        iconCls:' FA-FA Pencil ', 
        btnCls:' topjui-BTN-Green ',
        grid: productDg,
        dialog: {
            title: 'general layout form', 
            height: 550, 
            the href: _ctx + '/html/complex/dialog_edit.html?uuid={uuid}', // Open dialog path 
            url: _ctx + '/ json / datagrid / ? Product-detail.json UUID UUID = {} ', 
            buttonsGroup: [ 
                { 
                    text:' update ', 
                    URL: _ctx +' /json/response/success.json ', 
                    iconCls:' FA FA-Save ', 
                    Handler:' ajaxForm ', 
                    btnCls:' topjui-btn-Green ' 
                } 
            ] 
        } 
    }); 

　　// delete table toolbar event 
    $ ( "# the delete") iMenubutton ({. 
        Method,:'doAjax '
        Extend: '# productDg-Toolbar', 
        iconCls: 'FA FA-Trash', 
        btnCls: 'topjui-btn-Brown', 
        confirmMsg: 'This is a check box that enables more than Ajax delete data commit operation, submit grid parameter values specified .param ', 
        Grid: { 
            type:' DataGrid ', 
            ID:' productDg ', 
            uncheckedMsg:' please check the data to be deleted ', 
            param:' UUID: UUID, code: code ' 
        }, 
        URL: _ctx + '/json/response/success.json' 
    }); 
　　
　　// query 
    $ ( '# queryBtn') iMenubutton ({. 
        Method: 'query', 
        iconCls: 'FA FA-Search', 
        btnCls: ' Blue-BTN-topjui ', 
        form: {ID:'queryForm'},
        grid: {type: 'datagrid', 'id': 'productDg'}
    });
});

Please write code depending on the circumstances, such as delete ajax request, the request fails tips, success prompted the request, the request succeeds refresh the table and so on! ',' Messager-info ');














}

　　Specific functionality is implemented according to demand.

 

EasyUI Chinese network: http://www.jeasyui.cn

TopJUI front-end frame: http://www.topjui.com

TopJUI exchange community: http://ask.topjui.com