JQuery Easyui/TopJUIはJSでデータテーブルを作成し、添削・変更機能を実現

        
      
      

    

        
        
          
    
　　js
 
      
//     
function progressFormatter(value, rowData, rowIndex) {
        var htmlstr = '
';
        htmlstr += '
' + value + '%
';
        htmlstr += '
';
        htmlstr += '
' + value + '%
';
        htmlstr += '
';
        htmlstr += '
';
        return htmlstr;
}
//      
function operateFormatter(value, row, index) {
     var htmlstr = '  ';
     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.cnTopJUIフロントエンドフレーム:http://www.topjui.comTopJUIコミュニケーションコミュニティ:http://ask.topjui.com  
posted @ 
2019-06-06 14:17      (
...) コメント(
...) コレクションの