Extjs Dynamic Grid
<!-- 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);
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.