Ext.onReady(function () {
//给grid添加数据源
var store =
new Ext.data.JsonStore({
root: 'rows'
,
totalProperty: 'total'
,
url: 'RareWords.aspx?opt=init'
,
fields: ['RWLID', 'RWLNAME', 'CHARACTERS', 'PRONUNCE'
]
});
function createStore(url) {
return new Ext.data.JsonStore({
root: 'rows'
,
totalProperty: 'total'
,
url: url,
fields: ['RWLID', 'RWLNAME', 'CHARACTERS', 'PRONUNCE'
]
});
}
//分页工具栏
var p =
new Ext.PagingToolbar({
store: store
, pageSize: 20
, autoWidth: true
, displayInfo: true
, displayMsg: '第{0}条到{1}条，一共{2}条'
, emptyMsg: '没有记录'
});
//列名
var columns =
new Ext.grid.ColumnModel([
{
header: '编号'
,
sortable: true,
//设置这个属性进行排序
dataIndex: 'RWLID'
,
width: 80
}, {
header: '生僻字'
,
sortable: true,
//设置这个属性进行排序
dataIndex: 'RWLNAME'
,
width: 80
}, {
header: '部首'
,
sortable: true,
//设置这个属性进行排序
dataIndex: 'CHARACTERS'
,
width: 80
}, {
header: '读音'
,
sortable: true,
//设置这个属性进行排序
dataIndex: 'PRONUNCE'
,
gridwidth: 80
}
]);
//创建一个Grid
var grid =
new Ext.grid.GridPanel({
cm: columns
, loadMask: { msg: '正在加载页面,请稍候...'
}
// , width: document.documentElement.clientWidth - 8
// , height: document.documentElement.clientHeight - 5
, width: 600
, height: 600
, autoScroll: true
, collapsible: false
, animCollapse: false
, enableHdMenu: false
, title: '生僻字'
, renderTo: 'RareWords'
, store: store
, bbar: p
, tbar: [{ text: '新增', id: 'btn_add', handler: Add, iconCls: 'newIcon' },
//添加一个生僻字
'-'
,
{ text: '修改', id: 'btn_sub', handler: Modify, iconCls: 'modIcon' },
//修改生僻字
'-'
,
{ text: '删除', id: 'btn_del', handler: Delete, iconCls: 'delIcon'
},
'->'
,
{ xtype: 'tbtext', text: '部首:'
},
{ xtype: 'textfield', id: 'Characters'
},
'-'
,
{ xtype: 'tbtext', text: '读音:'
},
{ xtype: 'textfield', id: 'Prounce'
},
'-'
,
{ text: '查询', handler: Search, iconCls: 'search'
}
]
});
//按部首、读音查询
function Search() {
var opt = 'Search'
;
var characters = Ext.getCmp('Characters'
).getValue();
var prounce = Ext.getCmp('Prounce'
).getValue();
//escape
var receive_url = 'RareWords.aspx?opt=' + opt + '&Characters=' + escape(characters) + '&Pronunce=' +
escape(prounce);
store =
createStore(receive_url);
store.reload({ params: { start: 0, limit: 20
} });
grid.reconfigure(store, grid.getColumnModel());
$('#dialog input').val(''
);
};
//初始化数据
query();
function query() {
grid.getStore().reload({ params: { start: 0, limit: 20
} });
grid.reconfigure(grid.getStore(), grid.getColumnModel());
};
//定义全局变量
var ID;
var opt = ''
;
//生僻字弹出层
$('#dialog'
).dialog({
autoOpen: false,
width: 400
,
height: 250
,
minWidth: 200
,
minHeight: 200
,
maxWidth: 400
,
maxHeight: 400
,
title: '生僻字'
,
modal: true,
buttons: {
"确定":
function () {
var RWLNAME = $('#RWLNAME'
).val();
var CHARACTERS = $('#CHARACTERS'
).val();
var PRONUNCE = $('#PRONUNCE'
).val();
var rnt = requestUrl('RareWords.aspx'
, { opt: opt, RwlId: ID, RwlName: RWLNAME, Characters: CHARACTERS, Pronunce: PRONUNCE });
$(this).dialog('close'
);
grid.getStore().reload({ params: { start: 0, limit: 20
} });
Ext.Msg.alert('提示'
, rnt);
},
"关闭":
function () {
$(this).dialog('close'
);
}
}
});
//新增生僻字
function Add() {
//打开遮层
opt = 'Add'
;
$('#dialog input').val(''
);
$('#dialog').dialog('open'
);
};
//修改生僻字
function Modify() {
//选中一条记录
var rows =
grid.getSelectionModel().getSelections();
if (rows.length == 0) { alert('请至少选择一条记录');
return; }
opt = 'Update'
;
$('#dialog').dialog('open'
);
var RWLID = rows[0].get('RWLID'
);
var RWLNAME = rows[0].get('RWLNAME'
);
var CHARACTERS = rows[0].get('CHARACTERS'
);
var PRONUNCE = rows[0].get('PRONUNCE'
);
$('#RWLNAME'
).val(RWLNAME);
$('#CHARACTERS'
).val(CHARACTERS);
$('#PRONUNCE'
).val(PRONUNCE);
ID =
RWLID;
};
//删除生僻字
function Delete() {
//选中一条记录
var rows =
grid.getSelectionModel().getSelections();
if (rows.length == 0) { alert('请至少选择一条记录');
return; }
var RWLID = rows[0].get('RWLID'
);
var opt = 'Delete'
;
var receive_url = 'RareWords.aspx'
;
var data = { 'opt': opt, 'RwlId'
: RWLID };
if (confirm('你确定要删除吗？'
)) {
$.ajax({
url: receive_url,
async: false,
data: data,
success: function () {
//删除之后更新页面数据
grid.getStore().reload({ params: { start: 0, limit: 20
} });
}
});
}
};
});
转载于:https://www.cnblogs.com/siyunianhua/p/3436383.html
相关资源：JAVA上百实例源码以及开源项目
