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";
}

}