浏览 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(); }); 声明:JavaEye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
|
|
| 返回顶楼 | |
|
最后更新时间:2007-06-22
发帖也需要责任心
[{"add":"20070621 ","xm":"test","bh":"001","tel":"山东省组织部","cj":0}]
格式不对吧 引号 可以去jstang论坛看看入门例子 引用 道那里有问题,请,另外顺便在问一句这个例子中 新增加一行记录 怎么把新增加或修改的数据保存到数据库 谢谢 api文档上些得还是比较清楚的吧 建议看看javaeye发帖的规则 |
|
| 返回顶楼 | |
|
最后更新时间:2007-06-22
数据已经显示出来了,现在不知道在页面上新增加的行或修改的数据,如何传到 action ,action 里面如何解析,请,谢谢
------------------------------------------ 改造的是 http://extjs.com/deploy/ext/docs/index.html Inline editing 这个例子 把数据源换成从数据库取数了,可是界面上显示不出数据来 不知道那里有问题,请,另外顺便在问一句这个例子中 新增加一行记录 怎么把新增加或修改的数据保存到数据库 谢谢 ----------------------------------------- 数据已经显示出来了,现在不知道在页面上新增加的行或修改的数据,如何传到 action ,action 里面如何解析,请,谢谢 |
|
| 返回顶楼 | |
|
最后更新时间: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>
|
|
| 返回顶楼 | |
|
最后更新时间:2007-09-06
向 ksgimi 表示敬意.你写的示例代码非常好.把问题说到点子上了.我也遇到了同样的问题:ds.getModifiedRecords()中竟然不包括新增的记录,使用你那个办法基本可以解决这个问题.我希望未来能将ExtGrd用到Delphi数据感知组件的那种程度:不但能自动显示出数据,而且能自动收集修改过的数据(包括增删改),然后将修改过的数据提交到后台,后台就能自动生成 相应的更新数据Sql语句.这样就能做到在具体的业务逻辑之上实现数据的 CRUD (增删改查).那就爽了.
|
|
| 返回顶楼 | |
|
最后更新时间:2007-09-06
补充一点:
在 ksgimi 代码的基础上加一行: ds.getAt(yetCount).set("name",'未命名'); ds.getAt(yetCount).IsNew = true; //增加一个自定义属性,表明这是一条新增的记录. 这样就能可靠地得知哪些记录是新增的. |
|
| 返回顶楼 | |
|
最后更新时间:2007-09-26
有共同语言,集成buffalo extjs,但没有必要考虑struts
|
|
| 返回顶楼 | |






