<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>

//进度条创建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" οnclick="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');}