Extjs Dynamic Grid

2019独角兽企业重金招聘Python工程师标准>>>

<!-- DynamicGrid: js -->
/**
 * Created by landy on 14-8-5.
 */
Ext.define('Ext.ux.DynamicGrid', {
    extend: "Ext.container.Container",
    config: {
        loadGridMetaUrl: null,
        loadGridDataUrl: null,
        loadOneUrl: null,
        addOneUrl: null,
        updateOneUrl: null,
        deleteOneUrl: null
    },
    layout: "fit",
    initComponent: function () {
        var me = this;
        me.on("render", function () {
            Ext.Ajax.request({
                url: me.loadGridMetaUrl,
                success: function (resp) {
                    var meta = Ext.decode(resp.responseText).data;
                    //{name,text,pk}
                    var pkMeta = null;
                    var fields = [];
                    var columns = [];
                    var formItems = [];
                    for (var i in meta) {
                        var one = meta[i];
                        if (one.pk) {
                            pkMeta = one;
                        }
                        fields.push({
                            name: one.name
                        });
                        columns.push({
                            dataIndex: one.name,
                            text: one.text,
                            sortable: false
                        });
                        formItems.push({
                            fieldLabel: one.text,
                            name: one.name
                        });
                    }
                    var store = Ext.create("Ext.data.Store", {
                        fields: fields,
                        proxy: {
                            type: "ajax",
                            url: me.loadGridDataUrl,
                            reader: {
                                type: 'json',
                                root: 'data'
                            }
                        }
                    });
                    var grid = Ext.create("Ext.grid.Panel", {
                        columns: columns,
                        store: store,
                        tbar: {
                            items: [
                                {
                                    text: "增加",
                                    handler: function () {
                                        var addForm = Ext.create("Ext.form.Panel", {
                                            layout: "column",
                                            defaults: {
                                                labelAlign: "right",
                                                xtype: "textfield",
                                                padding: "10px 0px 0px 10px",
                                            },
                                            items: formItems,
                                            listeners: {
                                                "render": function () {
                                                    addForm.down("[name=" + pkMeta.name + "]").hide();
                                                }
                                            }
                                        });
                                        var addWin = Ext.create("Ext.window.Window", {
                                            maximized: true,
                                            layout: "fit",
                                            items: addForm,
                                            buttons: [
                                                {
                                                    text: "增加",
                                                    handler: function () {
                                                        addForm.submit({
                                                            url: me.addOneUrl,
                                                            success: function () {
                                                                Ext.Msg.alert("tips", "success");
                                                                grid.getStore().reload();
                                                                addWin.close();
                                                            },
                                                            failure: function () {
                                                                Ext.Msg.alert("tips", "failure");

                                                            }
                                                        });
                                                    }
                                                }
                                            ]
                                        });
                                        addWin.show();
                                    }
                                },
                                {
                                    text: "修改",
                                    handler: function () {
                                        var selected = grid.getSelectionModel().getSelection();
                                        if (selected) {
                                            var id = selected[0].get(pkMeta.name);
                                            var editForm = Ext.create("Ext.form.Panel", {
                                                bodyPadding: 10,
                                                layout: "column",
                                                defaults: {
                                                    labelAlign: "right",
                                                    xtype: "textfield"
                                                },
                                                items: formItems
                                            });
                                            var editWin = Ext.create("Ext.window.Window", {
                                                maximized: true,
                                                layout: "fit",
                                                items: editForm,
                                                buttons: [
                                                    {
                                                        text: "更新",
                                                        handler: function () {
                                                            editForm.submit({
                                                                url: me.updateOneUrl,
                                                                success: function () {
                                                                    Ext.Msg.alert("tips", "success");
                                                                    grid.getStore().reload();
                                                                    editWin.close();
                                                                },
                                                                failure: function () {
                                                                    Ext.Msg.alert("tips", "failure");
                                                                }
                                                            });
                                                        }
                                                    }
                                                ]
                                            });
                                            editWin.on("show", function () {
                                                editForm.load({
                                                    url: me.loadOneUrl,
                                                    params: {
                                                        id: id
                                                    },
                                                    failure: function () {
                                                        Ext.Msg.alert("tips", "failure");
                                                    }
                                                });
                                            });
                                            editWin.show();
                                        }
                                    }
                                },
                                {
                                    text: "删除",
                                    handler: function () {
                                        var selected = grid.getSelectionModel().getSelection();
                                        if (selected) {
                                            var id = selected[0].get(pkMeta.name);
                                            Ext.Msg.confirm("tips", "delete " + id, function (btn) {
                                                if ("yes" == btn) {
                                                    Ext.Ajax.request({
                                                        url: me.deleteOneUrl,
                                                        params: {
                                                            id: id
                                                        },
                                                        success: function () {
                                                            grid.getStore().reload();
                                                        },
                                                        failure: function () {
                                                            grid.getStore().reload();
                                                            Ext.Msg.alert("tips", "failure");
                                                        }
                                                    });
                                                }
                                            })
                                        }
                                    }
                                }
                            ]
                        },
                        bbar: {
                            xtype: "pagingtoolbar",
                            displayInfo: true,
                            store: store
                        }
                    });
                    grid.on("render", function () {
                        grid.getStore().reload();
                    });
                    me.add(grid);
                }
            });
        });

        me.callParent();
    }
});

Java后台代码:

<!-- Controller: java -->
private String testSql = "select * from t_bas_module";

@RequestMapping("/loadGridMeta")
@ResponseBody
public JsonResult loadGridMeta() {
    final List<DynamicGridItem> items = Lists.newArrayList();
    jdbcTemplate.query(testSql + " limit 1", new RowCallbackHandler() {
        @Override
        public void processRow(ResultSet resultSet) throws SQLException {
            ResultSetMetaData metaData = resultSet.getMetaData();
            for (int i = 1; i <= metaData.getColumnCount(); i++) {
                String columnName = metaData.getColumnName(i);
                boolean pk = "module_id".equals(columnName);
                String columnLabel = metaData.getColumnLabel(i);
                items.add(new DynamicGridItem(pk, columnName, columnLabel));
            }
        }
    });
    return JsonResult.withData(items);
}

@RequestMapping("/loadGridData")
@ResponseBody
public JsonResult loadGridData(
        @RequestParam(required = false,defaultValue = "0",value = "start")Integer start,
        @RequestParam(required = false,defaultValue = "10",value = "limit") Integer limit) {
    Integer total = jdbcTemplate.getJdbcOperations().
            queryForObject("select count(1) from(" + testSql + ") t", Integer.class);
    List<Map<String, Object>> list = jdbcTemplate.getJdbcOperations().queryForList(testSql + " limit ?,?", start, limit);
    return JsonResult.gridData(total, list);
}

转载于:https://my.oschina.net/huanger/blog/299135