ext+dwr完整的例子(包括树,增删改查等)
ext+dwr完整的例子(包括树,增删改查等)
文章分类:Web前端 关键字: ext+dwr完整的例子(包括树, 增删改查等)
---js
var UI = function(){
var ds;
var grid;
return {
init : function() {
Ext.QuickTips.init();
initDataSource();
ds.load({params:{start:0, limit:15}});
buildUI();
},
getStore: function() {
return ds;
}
};
function initDataSource(){
var recordType = Ext.data.Record.create([
{name:"id",type:"string"},
{name:"wf_id",type:"string"},
{name:"dept_name",type:"string"},
{name:"fax",type:"string"},
{name:"send_time",type:"date"}
]);
var proxy = new Ext.data.DWRProxy(AddHideColumn.getList, true);
ds = new Ext.data.Store({
proxy: proxy,
reader: new Ext.data.ListRangeReader(
{id:'id', totalProperty:'totalSize'}, recordType),
remoteSort: true
});
}
function getColumnModel(){
var columnModel = new Ext.grid.ColumnModel([{
header: 'ID',
width: 40,
align: 'center',
sortable: true,
dataIndex: 'id'
},
{
header: '流程ID',
width: 150,
align: 'left',
sortable: true,
dataIndex: 'wf_id'
},
{
header: '单位',
width: 150,
align: 'left',
sortable: true,
dataIndex: 'dept_name'
},
{
header: '传真',
width: 150,
align: 'left',
sortable: true,
dataIndex: 'fax'
},
{
header: '发送时间',
width: 150,
align: 'left',
sortable: true,
dataIndex: 'send_time',
renderer: Ext.util.Format.dateRenderer('Y-n-j G:i')
}
]);
columnModel.defaultSortable = true;
return columnModel;
}
function buildUI(){
var tb = new Ext.Toolbar( [{
text: '新建',
cls: 'x-btn-text-icon',
icon: '../images/iconNewNewsEntry.gif',
handler: function(){
showCreateUserDialog();
}
},{
text: '编辑',
cls: 'x-btn-text-icon',
icon: '../images/ed.gif',
handler : function(){
doEdit();
}
},{
text: '删除',
cls: 'x-btn-text-icon',
icon: '../images/removesmall.gif',
handler : function(){
doDel();
}
},
{
text: '机构树',
cls: 'x-btn-text-icon',
icon: '../images/search.gif',
handler : function(){
showTree();
}
}
]);
var bbar = new Ext.PagingToolbar({
pageSize: 15,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
grid = new Ext.grid.GridPanel({
store: ds,
cm: getColumnModel(),
height: 350,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
enableColumnHide: true,
enableColumnMove: true,
stripeRows: true,
tbar:tb,
bbar: bbar
});
var win = new Ext.Window({
closable: true,
width: 820,
height: 420,
x: 230,
y: 100,
plain: true,
layout: 'border',
items: [{
region: 'center',
layout: 'fit',
title: '例子',
items: [grid]
}]
});
win.show();
}
/*****************************/
//添加
function showCreateUserDialog(){
var editDialog;
var editForm;
editForm = new Ext.FormPanel({
labelAlign: 'right',
url:'',
bodyStyle:'padding:5px 5px 0',
autoScroll: true,
items:[
new Ext.form.TextField({
fieldLabel: 'ID',
name: 'id',
readOnly: false,
allowBlank:false,
width: 180,
maxLength: 32
}),
new Ext.form.TextField({
fieldLabel: '流程ID',
name: 'wfid',
readOnly: false,
allowBlank:false,
width: 180,
maxLength: 32
}),
new Ext.form.TextField({
fieldLabel: '单位',
name: 'deptname',
allowBlank:false,
width: 180,
maxLength: 50
}),
new Ext.form.TextField({
fieldLabel: '传真',
name: 'fax',
allowBlank:false,
width: 180,
maxLength: 50
}),
new Ext.form.TextField({
fieldLabel: '发送时间',
name: 'sendtime',
allowBlank:false,
width: 180,
maxLength: 50,
renderer: Ext.util.Format.dateRenderer('Y-n-j G:i')
}),
new Ext.form.Hidden({
name: 'id'
})
]
});
editDialog = new Ext.Window({
el: 'edit-user-dlg',
layout: 'fit',
width:360,
height:302,
resizable: false,
title: '编辑',
//border:false,
closeAction:'hide',
plain:true,
modal: true,
items: [editForm],
buttons: [{
text: '保存',
handler: doSaveAction
},{
text: '取消',
handler: function() {
editDialog.hide();
}
}]
});
document.getElementById("edit-user-dlg").innerHTML='';
editDialog.show();
function doSaveAction(){
var form = editForm.getForm();
if(!form.isValid()){
Ext.MessageBox.alert('提示','数据不正确');
return;
}
//保存数据
var formData = {id: '',wf_id: '',dept_name: '',fax: '',send_time: ''};
formData.id = form.findField('id').getValue();
formData.dept_name = form.findField('deptname').getValue();
formData.fax = form.findField('fax').getValue();
formData.wf_id = form.findField('wfid').getValue();
formData.send_time = form.findField('sendtime').getValue();
//alert(formData.dept_name+', ' + formData.fax + ', ' + formData.id +', ' +formData.send_time +', ' +formData.wf_id);
AddHideColumn.insert(formData,isSucc);
function isSucc(flag){
var msg = '失败';
if(flag>0){
msg = '成功';
}
Ext.MessageBox.alert('提示','操作'+msg);
editDialog.hide();
ds.reload();
}
}
}
//修改
function doEdit(){
var chks = grid.getSelections();
if(chks.length>1){
Ext.MessageBox.alert('提示','编辑时只能选择一行');
return;
}
else if(chks.length == 0){
Ext.MessageBox.alert('提示','没选择任何行');
return;
}
else{
document.getElementById("edit-user-dlg").innerHTML='';
cinfirmEdit();
}
}
function cinfirmEdit(){
var editDialog;
var editForm;
var leType = Ext.data.Record.create([
{name:"id",type:"string"},
{name:"wfid",type:"string"},
{name:"deptname",type:"string"},
{name:"fax",type:"string"},
{name:"sendtime",type:"date"}
]);
editForm = new Ext.FormPanel({
labelAlign: 'right',
url:'',
bodyStyle:'padding:5px 5px 0',
autoScroll: true,
items:[
new Ext.form.TextField({
fieldLabel: 'ID',
name: 'id',
readOnly: true,
allowBlank:false,
width: 180,
maxLength: 32
}),
new Ext.form.TextField({
fieldLabel: '流程ID',
name: 'wfid',
readOnly: false,
allowBlank:false,
width: 180,
maxLength: 32
}),
new Ext.form.TextField({
fieldLabel: '单位',
name: 'deptname',
allowBlank:false,
width: 180,
maxLength: 50
}),
new Ext.form.TextField({
fieldLabel: '传真',
name: 'fax',
allowBlank:false,
width: 180,
maxLength: 50
}),
new Ext.form.TextField({
fieldLabel: '发送时间',
name: 'sendtime',
allowBlank:false,
width: 180,
maxLength: 50,
renderer: Ext.util.Format.dateRenderer('Y-n-j G:i')
}),
new Ext.form.Hidden({
name: 'id'
})
]
});
editDialog = new Ext.Window({
el: 'edit-user-dlg',
layout: 'fit',
width:360,
height:302,
resizable: false,
title: '编辑',
//border:false,
closeAction:'hide',
plain:true,
modal: true,
items: [editForm],
buttons: [{
text: '保存',
handler: doSaveAction
},{
text: '取消',
handler: function() {
editDialog.hide();
}
}]
});
editDialog.show();
fillEditForm(); //添充表单
function doSaveAction(){
var form = editForm.getForm();
if(!form.isValid()){
Ext.MessageBox.alert('提示','数据不正确');
return;
}
//保存数据
var formData = {id: '',wf_id: '',dept_name: '',fax: '',send_time: ''};
formData.id = form.findField('id').getValue();
formData.dept_name = form.findField('deptname').getValue();
formData.fax = form.findField('fax').getValue();
formData.wf_id = form.findField('wfid').getValue();
formData.send_time = form.findField('sendtime').getValue();
//alert(formData.dept_name+', ' + formData.fax + ', ' + formData.id +', ' +formData.send_time +', ' +formData.wf_id);
AddHideColumn.insert(formData,isSucc);
function isSucc(flag){
var msg = '失败';
if(flag>0){
msg = '成功';
}
Ext.MessageBox.alert('提示','操作'+msg);
editDialog.hide();
ds.reload();
}
}
function fillEditForm(){
var chs = grid.getSelections();
var form = editForm.getForm();
var rowData = chs[0];
form.findField('wfid').setValue(rowData.get('wf_id'));
form.findField('deptname').setValue(rowData.get('dept_name'));
form.findField('fax').setValue(rowData.get('fax'));
form.findField('sendtime').setValue(rowData.get('send_time'));
form.findField('id').setValue(rowData.get('id'));
}
}
//删除
function doDel(){
var chs = grid.getSelections();
if(chs.length>0){
Ext.MessageBox.confirm('提示','是否确定删除?',confirmDel)
}
else{
Ext.MessageBox.alert('提示','还没选者要删除的行!');
}
//确认删除
function confirmDel(btn){
if(btn == 'yes'){
var itms = new Array();
for(var i=0; i<chs.length; i++){
itms.push(chs[i].get("id"));
}
AddHideColumn.deleteFax(itms,isSucc);
}
}
//是否删除成功
function isSucc(flag){
var msg = '失败';
if(flag>0){
msg = '成功';
}
Ext.MessageBox.alert('提示','操作'+msg);
ds.reload();
}
}
//显示树
function showTree(){
var nodeId;
document.getElementById("view-group-tree-dlg").innerHTML='';
var loader = new Ext.tree.DWRTreeLoader(TreeService.queryByNodeId, []);
var root = new Ext.tree.AsyncTreeNode({text: '中国', id:'1000'});
var tree = new Ext.tree.TreePanel({
id: 'deptTree',
loader:new Ext.tree.DWRTreeLoader(TreeService.queryByNodeId, {}, []),
border:false,
root:root
});
var treeEditer = new Ext.tree.TreeEditor(
Ext.getCmp('deptTree'),//将tree组建的实例放入
{
id:'tree-eidtTree',
allowBlank: false//输入的值不可以为空
}
);
tree.on('contextmenu',function(node,event){
nodeId = node.id;
event.preventDefault(); //这行是必须的
rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
});
//右键菜单
var rightClick = new Ext.menu.Menu({
id :'rightClickCont',
items : [{
id:'addNode',
text : '添加',
menu:[
{
id:'insertNode',
text:'添加同级节点',
handler : function() {
showCreateUserDialog();
}
},
{
id:'appendNode',
text:'添加子节点',
handler : function(){
showCreateUserDialog();
}
}
]
}, {
id:'delNode',
text : '删除',
handler : function() {
showCreateUserDialog();
}
}, {
id:'editnode',
text : '修改',
handler : function() {
showCreateUserDialog();
}
}]
});
/*
//增加树节点
function addDialog(){
document.getElementById("addNode-Dialog").innerHTML='';
var addNodeform = new Ext.FormPanel({
labelAlign : 'right',
url : '',
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
items : [new Ext.form.TextField({
fieldLabel : '节点名称',
name : 'name',
allowBlank : false,
width : 180,
maxLength : 50
}), new Ext.form.NumberField({
fieldLabel : '节点代码',
name : 'id',
allowBlank : false,
width : 180
}),
new Ext.form.ComboBox({
fieldLabel : '是否叶子节点',
store : new Ext.data.SimpleStore({
fields : [{
name : 'label',
type : 'string'
}, {
name : 'value',
type : 'string'
}],
data : [['是', 1], ['否', 0]]
}),
editable : false,
allowBlank : false,
hiddenName : 'enabled',
displayField : 'label',
valueField : 'value',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
emptyText : '设定节点...',
selectOnFocus : true,
width : 180
})]
});
var addNodeDialog = new Ext.Window({
el: 'addNode-Dialog',
layout: 'fit',
width:360,
height:302,
resizable: false,
title: '添加节点',
//border:false,
closeAction:'hide',
plain:true,
modal: true,
items: [addNodeform],
buttons: [{
text: '保存',
handler: function() {
saveNode();
}
},
{
text: '关闭',
handler: function() {
addNodeDialog.hide();
}
}
]
});
addNodeDialog.show();
//保存
function saveNode(){
var form = addNodeform.getForm();
var formData = {id: '',name: '',leaf: '',parentId:''};
formData.id = form.findField('id').getValue();
formData.name = form.findField('name').getValue();
formData.leaf = form.findField('enabled').getValue();
formData.parentId = nodeId;
//alert(formData.id+formData.name+formData.leaf+formData.parentId);
TreeService.addNode(formData,isSucc);
root.expandChildNodes(true);
//是否删除成功
function isSucc(flag){
var msg = '失败';
if(flag>0){
msg = '成功';
}
Ext.MessageBox.alert('提示','操作'+msg);
}
}
}
*/
var viewDialog = new Ext.Window({
el: 'view-group-tree-dlg',
layout: 'fit',
width:360,
height:302,
resizable: false,
title: '机构树',
//border:false,
closeAction:'hide',
plain:true,
modal: true,
items: [tree],
buttons: [{
text: '关闭',
handler: function() {
viewDialog.hide();
}
}]
});
viewDialog.show();
}
}();
Ext.onReady(UI.init, UI);
--TreeService.java
package ext.service;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import ext.bean.Tree;
import ext.db.DBHelp;
public class TreeService {
/**
* 根据节点ID查找其子节点
* @param nodeId
* @return
*/
public List queryByNodeId(String nodeId){
String sql = "select id,name,isLeaf,parentId, sortOrder from Docmnt_Content ";
sql += "where parentId ='" + nodeId +"'";
List<Object> nodeList = new ArrayList<Object>();
Map<String,Object> map = null;
try{
ResultSet rs = DBHelp.getStatement().executeQuery(sql);
while(rs.next()){
boolean bl = rs.getString("isLeaf").equals("1") ? true : false;
map = new HashMap<String,Object>();
map.put("id",rs.getInt("id"));
map.put("text", rs.getString("name"));
map.put("leaf",bl );
map.put("parentId",rs.getInt("parentId"));
map.put("sortOrder",rs.getInt("sortOrder"));
map.put("expandable", !bl);
nodeList.add(map);
System.out.println(bl + rs.getString("name") + rs.getString("isLeaf"));
}
}catch(Exception ex){
ex.printStackTrace();
}
return nodeList;
}
public int addNode(Tree tree){
String sql = "insert into Docmnt_Content(id,name,isLeaf,parentId,sortOrder) values('"+ tree.getId() +"','";
sql+= tree.getName() +"','" + tree.getLeaf() +"','" + tree.getParentId() +"',0)";
try{
DBHelp.getStatement().executeQuery(sql);
}catch(Exception ex){
ex.printStackTrace();
return 0;
}
return 1;
}
}
--AddHideColumn.java
package ext.service;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import org.apache.commons.lang.ArrayUtils;
import ext.bean.FAX;
import ext.bean.ListRange;
import ext.bean.Column;
import ext.db.DBHelp;
public class AddHideColumn {
public List queryColumns(String uid,String url){
String qSql = "select * from t_hideColumn where id='"+ uid +"' and url ='" + url +"'";
List<String> columns = null;
try{
ResultSet rs = DBHelp.getStatement().executeQuery(qSql);
if(rs.next()){
columns = new ArrayList<String>();
String col =rs.getString(3);
String colArr[] = col.split(";");
for(int i=0;i<colArr.length ;i++){
if(!"".equals(colArr[i]))
columns.add(colArr[i]);
}
}
}
catch(Exception ex){
System.out.println("查询列数据失败...");
}
return columns;
}
public ListRange getList(int startPosition, int maxResults, String orderBy){
List<FAX> list = new ArrayList<FAX>();
String qSql = "select * from zsy_fax_status_temp";
try{
ResultSet rs = DBHelp.getStatement().executeQuery(qSql);
while(rs.next()){
FAX fax = new FAX();
fax.setId(rs.getString("id"));
fax.setDept_name(rs.getString("dept_name"));
fax.setFax(rs.getString("fax"));
fax.setWf_id(rs.getString("wf_id"));
fax.setSend_time(rs.getString("send_time"));
list.add(fax);
}
}catch(Exception ex){
ex.printStackTrace();
}
FAX[] FAXArray = list.toArray(new FAX[0]);
ListRange result = new ListRange();
result.setTotalSize(list.size());
int start = startPosition;
int end = maxResults < 0 ? Integer.MAX_VALUE : start + maxResults;
result.setData(ArrayUtils.subarray(FAXArray, start, end));
return result;
}
public String insert(FAX obj){
String dSql = "delete from zsy_fax_status_temp where id='" + obj.getId() +"'";
String sql = "insert into zsy_fax_status_temp(id,wf_id,dept_name,fax,send_time) values('";
sql+= obj.getId() + "','" + obj.getWf_id() + "','" + obj.getDept_name() + "','" + obj.getFax() + "','";
sql+= obj.getSend_time() + "')";
try{
DBHelp.getStatement().execute(dSql);
DBHelp.getStatement().execute(sql);
}catch(Exception ex){
ex.printStackTrace();
System.out.println("添加数据失败...");
return "0";
}
return "1";
}
public String deleteFax(String id[]){
String sql = "delete from zsy_fax_status_temp where id ='";
try{
for(int i=0; i<id.length ;i++){
sql = sql + id[i]+"'";
DBHelp.getStatement().execute(sql);
}
}catch(Exception ex){
ex.printStackTrace();
System.out.println("删除数据失败...");
return "0";
}
return "1";
}
}
