读书人

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

发布时间: 2012-02-21 16:26:23 作者: rapoo

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

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

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


请各位帮帮忙啦,小妹不甚感激!!!!!!!

[解决办法]
1.定时采用ajax方式获得数据
2.每次用ajax请求的时候,只返回增量数据,那么就要传送一个上次请求的时间或最大的id过去
3.若想选中的数据还保持,则不能用分页的方式显示列表
[解决办法]
list页面刷新可以用DWR技术实现,鼠标选中则不了解帮不了
[解决办法]

探讨
1.定时采用ajax方式获得数据
2.每次用ajax请求的时候,只返回增量数据,那么就要传送一个上次请求的时间或最大的id过去
3.若想选中的数据还保持,则不能用分页的方式显示列表

[解决办法]
最好就是用AJAx,处理页面局部更新一般用Ajax就足够了。
[解决办法]
把你选中的id传过去啊。不知道tr有没有select方法,不常接触。
[解决办法]
我拖动鼠标选中的数据的阴影就会消失...你说的这个意思是不是当你选中数据的时候因为ajax刷新造成选中数据的阴影消失,ajax中能否加个判断 在你开始选数据的时候 ajax停止去后台读取数据
[解决办法]
$.ajax({
type : "post",
url : "访问处理的url",
data : "传的参数"
success : function(msg) {
$("#层的ID").empty().html(msg);
}
});
}
$(function() {
subflow('${参数}');
});

地下放一个空的层,起个名字,
[解决办法]
“拖动鼠标的方式...”


这个应该实现不了吧。这已经不是程序控制的问题了。另外哪个浏览器也没见过这种功能啊。
[解决办法]
ajax、json
[解决办法]
拖动鼠标选择。这个方式还是没见过。JS好像不可以控制吧。
[解决办法]
我觉得jquery有你想要的这个效果
[解决办法]
1、查询的方法改改,不要查询全部数据,仅查询新增加的数据
2、用before或者after函数,不要直接用html。
[解决办法]
Ajax方式可以解决无刷新问题,选择问题还是关注一下
[解决办法]
看了下jQuery 的api 没发现有能实现鼠标选择内容的。
[解决办法]
探讨
引用:
我拖动鼠标选中的数据的阴影就会消失...你说的这个意思是不是当你选中数据的时候因为ajax刷新造成选中数据的阴影消失,ajax中能否加个判断 在你开始选数据的时候 ajax停止去后台读取数据


是啊,那怎么才能知道你要选择数据了,而且它是拖动鼠标的方式选择数据的啊,

[解决办法]
探讨
1.定时采用ajax方式获得数据
2.每次用ajax请求的时候,只返回增量数据,那么就要传送一个上次请求的时间或最大的id过去
3.若想选中的数据还保持,则不能用分页的方式显示列表

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

数据orderby 添加时间 最上面的为当前最后一条 ,然后定时把第一条数据的time传到后台查询是否有新数据 不过这个依旧不能解决用户在托鼠标时刷新数据造成的麻烦
[解决办法]
其实吧extjs应该能解决你的问题
[解决办法]
使用Jquery的after()或者before()
判断是否有新增数据的方式:
每次插入的新数据一般都会有一个插入时间,每次查询的时候以当前系统时间为基准,判断它是否大于系统时间就是了。
[解决办法]
刚试过了,每10秒store.load(),在这期间去数据库增加一个用户,会自动在页面上刷新出来,但是点击选中的阴影并不会消失


[解决办法]
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,你先看看吧
[解决办法]
如果不是整个页面reload 动态insert方式应该不会把鼠标拖动选中数据的阴影去除

读书人网 >Java Web开发

热点推荐