页面无刷新并自动去获取数据库中的数据

[pingsuccess]

要求：

一个list页面，如果有新增的数据，这个页面要无刷新的及时显示，并且如果我以拖动鼠标的方式选中了多条数

据（拖动鼠标的方式copy数据），及时显示的同时不能让我选中的这些数据的阴影消失，急，，，急。。。。


请各位帮帮忙啦，小妹不甚感激！！！！！！！

[bohe_198878]

刚试过了，每10秒store.load(),在这期间去数据库增加一个用户，会自动在页面上刷新出来，但是点击选中的阴影并不会消失

[pingsuccess]

[Quote=引用 45 楼 bohe_198878 的回复:]
刚试过了，每10秒store.load(),在这期间去数据库增加一个用户，会自动在页面上刷新出来，但是点击选中的阴影并不会消失
[/Quote]

这个具体是什么样的？我不会jquery，你那边有具体的例子么？可否发给我呢？谢谢了！我的邮箱：[e-mail]，谢谢了！

[bohe_198878]

这个不是jQuery诶，要用extjs的话，你的页面得重新写，你确定要？

[pingsuccess]

[Quote=引用 47 楼 bohe_198878 的回复:]
这个不是jQuery诶，要用extjs的话，你的页面得重新写，你确定要？
[/Quote]

恩，因为我要实现这个功能，没关系的，你可以发给我吗？非常感谢！

[bohe_198878]

我也是刚开始学extjs的，自己写了一个增删改查，我只是在显示里面用了一下你说的这个功能，你要我全部的代码？

[pingsuccess]

[Quote=引用 49 楼 bohe_198878 的回复:]
我也是刚开始学extjs的，自己写了一个增删改查，我只是在显示里面用了一下你说的这个功能，你要我全部的代码？
[/Quote]

因为我不懂这个extjs，其实有增加和查询就可以了，我主要是想看这个功能，尽量完整些，要不然我到时看不懂了。

[bohe_198878]

Ext.onReady(init);

function init(){
var viewport=new Ext.Viewport({
layout:'border',
items:[gridPanel]
});
//定时器
new Ext.util.TaskRunner().start({
run:function(){
queryStore.load();
},interval:3000
});
queryStore.load({
// callback:function(records,option,success) {
// alert('aaa'+records.length);
// }
});
};


var addButton=new Ext.Button({
id:'addButton',
text:'增加',
handler:function(){
formPanel.getForm().reset();
win.setTitle("增加用户");
win.show();
}
});

var deleteButton=new Ext.Button({
text:'删除',
handler:function(){
Ext.Msg.confirm('提示','确定要删除？',function(button){
if(button=='yes'){
var record=gridPanel.getSelectionModel().getSelected();
if(record==null){
Ext.Msg.alert('提示','请选择某一确定的记录！');
return;
}
var id=record.get('id');
Ext.Ajax.request({
url:'./delete.do',
params:{
id:id
},
success:function(response){
// var obj=Ext.decode(response.responseText);
// if(obj.success){
// queryStore.remove(record);
queryStore.load();
// }else{
// Ext.Msg.alert('提示',obj.msg);
// }
},
failure:function(){
Ext.Msg.alert('提示','删除失败');
}
})
}
})
}
});

var modifyButton=new Ext.Button({
text:'修改',
handler:function(){
var selModel=gridPanel.getSelectionModel();
if(selModel.hasSelection()){
var record=selModel.getSelected();
functionModify(record);
}
}
});

var functionModify=function(record){
win.setTitle('修改用户');
win.show(modifyButton,function(){
formPanel.getForm().load({
url:'./queryOne.do?id='+record.get('id'),
success:function(){
},
faulire:function(){
Ext.Msg.alert('提示','加载失败');
}
})
});
}

var reader=new Ext.data.JsonReader({
idProperty:'id',
//root:'list',
fields:[
{name:'id',mapping:'id',type:'string'},
{name:'name',mapping:'name',type:'string'},
{name:'password',mapping:'password',type:'string'}
]
})
var queryStore=new Ext.data.Store({
id:'queryStore',
autoDestory:true,
url:'./query.do',
reader:reader
// paramNames:{
// sort:'id'
// }
});

var gridPanel=new Ext.grid.GridPanel({
id:'gridPanel',
region:'center',
title:'用户',
frame: false,
border:false,
view:new Ext.ux.grid.LockingGridView(),
tbar:[addButton,deleteButton,modifyButton],
store:queryStore,
cm:new Ext.ux.grid.LockingColumnModel({
defaults:{
sortable:false,
locked:false
},
columns:[
new Ext.grid.Column({
dataIndex:'id',
header:'编号'
}),
new Ext.grid.Column({
dataIndex:'name',
header:'姓名'
}),
new Ext.grid.Column({
dataIndex:'password',
header:'密码'
})
]
}),
listeners:{
rowdblclick:function(grid,rowIndex,e){
functionModify(queryStore.getAt(rowIndex));
}
}
});


var idTextField=new Ext.form.TextField({
fieldLabel:'编号',
name:'id'
})

var nameTextField=new Ext.form.TextField({
fieldLabel:'姓名',
name:'name'
})

var passwordTextField=new Ext.form.TextField({
id:'password',
fieldLabel:'密码',
name:'password'
})



var formPanel=new Ext.form.FormPanel({
id:'formPanel',
labelWidth:40,
width:300,
height:300,
region:'center',
bodyStyle:'padding:15px',
xtype:'form',
items:[idTextField,nameTextField,passwordTextField,new Ext.form.RadioGroup({
items:[{boxLabel:'电压等级',name:'option',checked:true},{boxLabel:'电压等级',name:'option'},{boxLabel:'电压等级',name:'option'}]
})],
reader:reader
});

var submit=new Ext.Button({
id:'submit',
text:'确定',
handler:function(){
if(idTextField.getValue().length==0){
Ext.Msg.alert('提示','编号不能为空',function(){idTextField.focus();});
return;
};
if(nameTextField.getValue().length==0){
Ext.Msg.alert('提示','姓名不能为空',function(){nameTextField.focus();});
return;
};
if(passwordTextField.getValue().length==0){
Ext.Msg.alert('提示','密码不能为空',function(){passwordTextField.focus();});
return;
};
try{
formPanel.getForm().doAction('submit',{
url:'./add.do',
method:'POST',
//waitMsg:'正在保存...',
//timeout:3000,
success:function(form,action){
queryStore.load();
win.hide();
},
failure:function(form,action){
Ext.Msg.alert('提示','保存失败');
}
});
}catch(e){
alert(e.message);
}
}
});

var cancel=new Ext.Button({
text:'取消',
handler:function(){
win.hide();
}
});

var win = new Ext.Window({
id:'win',
width:400,
height:200,
layout:'fit',
modal:true,
closeAction:'hide',
plain:true,
items:formPanel,
buttons:[submit,cancel]
});
这是我的js，你先看看吧

[pingsuccess]

[Quote=引用 51 楼 bohe_198878 的回复:]
Ext.onReady(init);

function init(){
var viewport=new Ext.Viewport({
layout:'border',
items:[gridPanel]
});
//定时器
new Ext.util.TaskRunner().start({
run:function(){
queryStore.load();
},inte……
[/Quote]

你给我这样发个这个，我看不懂啊！！！

[bohe_198878]

那你要我发什么给你啊，除了这个就是servlet里面连接数据库，没了

[bohe_198878]

我只是告诉你这个功能能实现，具体你要不要用得看你自己，要用的话你得自学extjs然后去改你的程序

[pingsuccess]

[Quote=引用 53 楼 bohe_198878 的回复:]
那你要我发什么给你啊，除了这个就是servlet里面连接数据库，没了
[/Quote]

啊，不可能吧，起碼得有個list頁面吧，這些js肯定要寫在一個list頁面吧，servlet裏面對這些數據的處理吧。應該不可能就這些吧，要不你把你的項目全部發給我把，我自己跑跑。看看，方便嗎？可以嗎？

[pingsuccess]

[Quote=引用 54 楼 bohe_198878 的回复:]
我只是告诉你这个功能能实现，具体你要不要用得看你自己，要用的话你得自学extjs然后去改你的程序
[/Quote]

我沒有那麼多的時間了，項目緊啊！！！

[bohe_198878]

jsp页面全在js里面了，也就是说它就是用js书写来布局的，就算我给你你也得重新配置环境，不然跑不起来的
页面的话就一个html，代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="extjs/ux/css/ux-all.css">
<script type="text/javascript" src="extjs/ux/ux-all.js"></script>
<script type="text/javascript" src="form.js"></script>
<script type="text/javascript" src="login.js"></script>
<!--<title>Insert title here</title>-->
</head>
<body>
</body>
</html>

[pingsuccess]

[Quote=引用 57 楼 bohe_198878 的回复:]
jsp页面全在js里面了，也就是说它就是用js书写来布局的，就算我给你你也得重新配置环境，不然跑不起来的
页面的话就一个html，代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta htt……
[/Quote]

暈，那我就成了“丈二的和尚-摸不著頭腦了”。。。。。。。暈。。。。。。

[bohe_198878]

我觉得还是想想怎么用js去解决这个问题吧 都是我的错 不应该讲这么大一堆话

[pingsuccess]

[Quote=引用 59 楼 bohe_198878 的回复:]
我觉得还是想想怎么用js去解决这个问题吧 都是我的错 不应该讲这么大一堆话
[/Quote]

不過我還是很謝謝你，謝謝你給我的建議，非常感謝！得再想想其他的辦法。

[lxf001002]

那你怎么才能知道有新增的数据产生呢？我的想法：一种方式是让它不刷新页面，去监测新增数据，如果有新增数据，让它显示在第一条，也就是相当于是一种动态添加表格的方式那样显示在list页面...关键是怎样才能知道有新数据增加呢？

数据orderby 添加时间 最上面的为当前最后一条 ，然后定时把第一条数据的time传到后台查询是否有新数据 不过这个依旧不能解决用户在托鼠标时刷新数据造成的麻烦

[bohe_198878]

其实吧extjs应该能解决你的问题

[lxf001002]

如果不是整个页面reload 动态insert方式应该不会把鼠标拖动选中数据的阴影去除

[pingsuccess]

谢谢各位的踊跃回答，这个问题我已经解决了，我用的是jquery解决的，然后调用用jquer的after方法用拼接字符串的形式进行表格内容的追加，然后解决了，小妹感谢各位了。。。。