论坛首页 AJAX版 EXT

改造的是 http://extjs.com/deploy/ext/docs/index.html

浏览 4726 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
最后更新时间:2007-06-22 关键字: Inline edit
改造的是 http://extjs.com/deploy/ext/docs/index.html Inline editing 这个例子 把数据源换成从数据库取数了,可是界面上显示不出数据来 不知道那里有问题,请,另外顺便在问一句这个例子中 新增加一行记录 怎么把新增加或修改的数据保存到数据库 谢谢
dao里实现如下
public List QueryYhxx(String tj) {
StringBuffer sb =new StringBuffer();
sb.append(" SELECT psuser_uid,psuser_name,psuser_zznm,psuser_cjrq,psuser_cjr ");
sb.append(" From psuser ");

return (List)getJdbcTemplate().query(sb.toString(),new ResultSetExtractor() {
public Object extractData(ResultSet rs)
throws SQLException, DataAccessException {
List lt = new ArrayList();
while (rs.next()) {
test  dbean = new test();
dbean.setBh(rs.getString("psuser_uid"));
dbean.setXm(rs.getString("psuser_name"));
dbean.setTel(rs.getString("psuser_zznm"));
dbean.setAdd(rs.getString("psuser_cjrq"));

lt.add(dbean);
}
return lt;
}
});
}

action 里实现如下
public String getGridJsonData1(ActionForm form,HttpServletRequest request,HttpServletResponse response) throws IOException{
List list=this.getService().QueryYhxx("");
System.out.println("test");
//JSONArray jsonArray = JSONArray.fromObject(list);
//不知道该用  JSONArray.fromObject 还是用 JSONArray.fromCollection((Collection) list) 好象结果是一样的
//System.out.println("test:"+jsonArray.length());
//System.out.println("test:"+jsonArray.toString());

String json=JSONArray.fromCollection((Collection) list).toString();

System.out.println("test:"+json);

response.setContentType("text/html;charset=UTF-8");
response.getWriter().print("{datalist:" + json + "}");

return null;
}

System输出的数据如下:
[{"add":"20070621  ","xm":"test","bh":"001","tel":"山东省组织部","cj":0}]

页面显示数据脚本如下
Ext.onReady(function(){



    function formatBoolean(value){
        return value ? 'Yes' : 'No'; 
    };
   
    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    };
    // shorthand alias
    var fm = Ext.form, Ed = Ext.grid.GridEditor;

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel([{
           header: "编号",
           dataIndex: 'bh',
           width: 220,
           editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        },{
           header: "姓名",
           dataIndex: 'xm',
           width: 130,
           editor: new Ed(new fm.TextField({
               allowBlank: false
            }))
        },{
           header: "组织内码",
           dataIndex: 'tel',
           width: 70,
           align: 'right',
           editor: new Ed(new fm.TextField({
               allowBlank: false
           }))
        },{
           header: "创建日期",
           dataIndex: 'add',
           width: 95,
           renderer: formatDate,
           editor: new Ed(new fm.TextField({
               allowBlank: false
            }))
        }]);

    // by default columns are sortable
    cm.defaultSortable = true;

    // this could be inline, but we want to define the Plant record
    // type so we can add records dynamically
    var Plant = Ext.data.Record.create([
           // the "name" below matches the tag name to read, except "availDate"
           // which is mapped to the tag "availability"
           {name: 'bh', type: 'string'},
           {name: 'xm', type: 'string'},
           {name: 'tel',type: 'string'},
           {name: 'add', type: 'string'}
      ]);

    // create the Data Store
    var ds = new Ext.data.Store({
        // load using HTTP
        proxy: new Ext.data.HttpProxy({url: '/plat/qmys/test/test.do?cmd=getGridJsonData1'}),
reader: new Ext.data.JsonReader({}, [ 'bh', 'xm', 'tel','add'])
    });

    // create the editor grid
    var grid = new Ext.grid.EditorGrid('editor-grid', {
        ds: ds,
        cm: cm,
        //selModel: new Ext.grid.RowSelectionModel(),
        enableColLock:false
    });

    var layout = Ext.BorderLayout.create({
        center: {
            margins:{left:3,top:3,right:3,bottom:3},
            panels: [new Ext.GridPanel(grid)]
        }
    }, 'grid-panel');


    // render it
    grid.render();

   
    var gridHead = grid.getView().getHeaderPanel(true);
    var tb = new Ext.Toolbar(gridHead, [{
        text: '增加',
        handler : function(){
            var p = new Plant({
                bh: 'BH',
                xm: 'XM',
                tel: 'TEL',
                add: 'ADD'
            });
            grid.stopEditing();
            ds.insert(0, p);
            grid.startEditing(0, 0);
        }
    }]);
tb.add('-',
{
text: '修改',
handler :  modify
},
'-',
{
text: '保存',
handler :  savedata
}

)
function modify(){
alert("modify");
}
function savedata(){

}
    // trigger the data store load
    ds.load();
});
   
最后更新时间:2007-06-22
发帖也需要责任心

[{"add":"20070621 ","xm":"test","bh":"001","tel":"山东省组织部","cj":0}]

格式不对吧 引号

可以去jstang论坛看看入门例子

引用

道那里有问题,请,另外顺便在问一句这个例子中 新增加一行记录 怎么把新增加或修改的数据保存到数据库 谢谢

api文档上些得还是比较清楚的吧 建议看看javaeye发帖的规则
   
0 请登录后投票
最后更新时间:2007-06-22
数据已经显示出来了,现在不知道在页面上新增加的行或修改的数据,如何传到 action ,action 里面如何解析,请,谢谢

------------------------------------------
改造的是 http://extjs.com/deploy/ext/docs/index.html Inline editing 这个例子 把数据源换成从数据库取数了,可是界面上显示不出数据来 不知道那里有问题,请,另外顺便在问一句这个例子中 新增加一行记录 怎么把新增加或修改的数据保存到数据库 谢谢
-----------------------------------------

数据已经显示出来了,现在不知道在页面上新增加的行或修改的数据,如何传到 action ,action 里面如何解析,请,谢谢
   
0 请登录后投票
最后更新时间:2007-07-27
我的写法如下,采用struts2+buffalo+ext 供参考
<head>
	<title><@s.text name="familyMember"/></title>
	<#include "headlib.ftl"> 
</head>
<body>
<script type="text/javascript"> 
Ext.onReady(function(){
	Ext.QuickTips.init();
	var myrowIndex;
	var fm = Ext.form, Ed = Ext.grid.GridEditor;
	var cm = new Ext.grid.ColumnModel([{
		header: '<@s.text name="familyMember.name"/>',
		dataIndex: 'name',
		width: 220,
		editor: new Ed(new fm.TextField({allowBlank: false}))
	}]);

	// by default columns are sortable
	cm.defaultSortable = true;

	var familyMember = Ext.data.Record.create([
		{name:'id',type:'integer'},
		{name: 'name', type: 'string'}
	]);

	var ds = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({url: ContextPath+'/steady/listFamilyMember.action'}),
		reader: new Ext.data.JsonReader({
			root: 'results',
			totalProperty: 'totalCount',
			id: 'id'
			}, [
			{name: 'id'},
			{name: 'name'},
			]
		),
		// turn off remote sorting
		remoteSort: false
	});

	// create the editor grid
	var grid = new Ext.grid.EditorGrid('editor-grid', {
		ds: ds,
		cm: cm,
		selModel: new Ext.grid.CellSelectionModel(),
		enableColLock:false
	});

	var layout = Ext.BorderLayout.create({
		center: {
			margins:{left:3,top:3,right:3,bottom:3},
			panels: [new Ext.GridPanel(grid)]
		}
	}, 'grid-panel');

	// render it
	grid.render();

	var gridHead = grid.getView().getHeaderPanel(true);
	var tb = new Ext.Toolbar(gridHead, [{
		text: '<@s.text name="create"/>',
		handler :doAdd
	},{
		text: '<@s.text name="save"/>',
		handler : doSave
	},{
		text: '<@s.text name="delete"/>',
		handler : doDel
 	}]);

	function doAdd() {
		var p = new familyMember({
				id:-1,
				name:''
 		});
		grid.stopEditing();
		var yetCount=ds.getCount();
		ds.insert(yetCount, p);
		//标示cell已修改过
		ds.getAt(yetCount).set("name",'未命名');
		grid.startEditing(yetCount, 0);
	}
	
	function doSave() {
		var eds=ds.getModifiedRecords().slice(0);
		//var eds=ds.getModifiedRecords();
		for(var i = 0;i<eds.length;i++){
			record =eds[i];
			if (record.get("id")==-1) {
				buffalo.remoteCall("houseChargeService.createFamilyMember",[record.get("name")],function(reply) {
					var sucess = reply.getResult();
					if (sucess==1) {
						alert("duplicate name!");
					} else {
						if (sucess!=0) {
							alert("save fail!");
						} else {
							record.commit();
						}
					}
				});
			} else {
				buffalo.remoteCall("houseChargeService.updateFamilyMember",[record.get("id"),record.get("name")],function(reply) {
					var sucess = reply.getResult();
					if (sucess==1) {
						alert("duplicate name!");
					} else {
						if (sucess!=0) {
							alert("save fail!");
						} else {
							record.commit();
						}
					}
				});
			}
		}
	}


	function doDel(){
		if(grid.selModel.hasSelection()){
			Ext.MessageBox.confirm('Message', '<@s.text name="confirm.delete"/>', doDelDetail);	
		} else {
			Ext.MessageBox.alert('Error', '<@s.text name="confirm.delete"/>');
		}
	}     
	
	function doDelDetail(btn)	{
		if (btn == 'yes') {
			var record = ds.getAt(grid.selModel.getSelectedCell()[0]);
			if (record.get("id")==-1) {
				ds.remove(record);
			} else {
				buffalo.remoteCall("houseChargeService.deleteFamilyMember",[record.get("id")],function(reply) {
					var sucess = reply.getResult();
					if (sucess!=0) {
						alert(" delte fail!");
					} else {
						ds.remove(record);
					}

				});
			}
		}
	}

	// trigger the data store load
	ds.load();
});
</script>
<div id="grid-panel" style="width:100%;height:290px;" >
      <div id="editor-grid"></div>
</div>
<br>
<div id="grid-panel" style="width:600px;height:300px;">
	<div id="editor-grid"></div>
</div>
</body>
</html>  

headlib.ftl:
	<link rel="stylesheet" type="text/css" href="${base}/css/green.css" title="green style" />
	<link rel="stylesheet" type="text/css" href="${base}/ajaxlib/ext/resources/css/ext-all.css" />
	<script type="text/javascript" src="${request.getContextPath()}/ajaxlib/ext/adapter/yui/yui-utilities.js"></script>     
	<script type="text/javascript" src="${request.getContextPath()}/ajaxlib/ext/adapter/yui/ext-yui-adapter.js"></script>     
	<script type="text/javascript" src="${request.getContextPath()}/ajaxlib/ext/ext-all.js"></script>
	<script type="text/javascript" src="${request.getContextPath()}/ajaxlib/ext/json_cn.js"></script>  
	<!--buffalo-->
	<script type="text/javascript" src="${request.getContextPath()}/ajaxlib/buffalo/prototype.js"></script>
	<script type="text/javascript" src="${request.getContextPath()}/ajaxlib/buffalo/buffalo.js"></script>
	<script language="javascript">
		var ContextPath="${request.getContextPath()}"
		var END_POINT="${request.getContextPath()}/bfapp";
		var buffalo = new Buffalo(END_POINT,false);
	</script>
   
0 请登录后投票
最后更新时间:2007-09-06
向 ksgimi 表示敬意.你写的示例代码非常好.把问题说到点子上了.我也遇到了同样的问题:ds.getModifiedRecords()中竟然不包括新增的记录,使用你那个办法基本可以解决这个问题.我希望未来能将ExtGrd用到Delphi数据感知组件的那种程度:不但能自动显示出数据,而且能自动收集修改过的数据(包括增删改),然后将修改过的数据提交到后台,后台就能自动生成 相应的更新数据Sql语句.这样就能做到在具体的业务逻辑之上实现数据的 CRUD (增删改查).那就爽了.
   
0 请登录后投票
最后更新时间:2007-09-06
补充一点:
在 ksgimi 代码的基础上加一行:
ds.getAt(yetCount).set("name",'未命名');  
ds.getAt(yetCount).IsNew = true; //增加一个自定义属性,表明这是一条新增的记录.
这样就能可靠地得知哪些记录是新增的.
   
0 请登录后投票
最后更新时间:2007-09-26
有共同语言,集成buffalo extjs,但没有必要考虑struts
   
0 请登录后投票
论坛首页 AJAX版 EXT

跳转论坛:
JavaEye推荐