BlogJava-爪哇一角-文章分类-AJAX + jQuery

easyui-progressbar实例！

非洲小白脸 — Wed, 23 Mar 2016 07:05:00 GMT

jsp：

js：

var timerId;

// 初始化方法

function init(){

//每隔0.5秒自动调用方法，实现进度条的实时更新

timerId=window.setInterval(getProgress,500);

$.ajax({

dataType: "json",

method: "post",

url: contextPath+"/XXXX/clearProgress.do"

})

$("#p").show();

$('#p').window({

title:'进度条',

width:420,

height:50,

modal:true,

minimizable:false,

maximizable: false,

closed: false,

collapsible:false

});

};

function getProgress()

{

$.ajax({

dataType: "json",

method: "post",

url: contextPath+"/XXX/getProgress.do"

}).done(function(data){

if(data.processInt>=100){

window.clearInterval(timerId);

$('#p').window('close');

}

$('#p').progressbar('setValue',data.processInt);

}).fail(function(){

$.messager.alert('告警',"本次操作失败，请重新操作",'error');

return false;

});

}

java：

int processInt = 0;

/**

* ??

* @author

* @param

* @return

* @see [类、类#方法、类#成员]

@RequestMapping(value = "/clearProgress", method = RequestMethod.POST)

public @ResponseBody void clearProgress()

{

processInt = 0;

}

/**

* ??

* @author

* @param

* @return

* @see [类、类#方法、类#成员]

@RequestMapping(value = "/getProgress", method = RequestMethod.POST)

public @ResponseBody Map getProgress()

{

Map map = new HashMap();

try

{

Random random=new Random();

processInt += random.nextInt(10);

}

catch (Exception e)

{

log.error("Exception:", e);

}

map.put("processInt", processInt);

return map;

}

实际项目中，只要将后台处理的过程的进度实时传递给公共变量processInt 即可。

非洲小白脸 2016-03-23 15:05 发表评论

dwr动态加载下拉框

非洲小白脸 — Thu, 23 Jun 2011 09:36:00 GMT

java文件中增加下列：
public String method(String id){
  XXXLogic logic = new XXXLogic ();
  try {
   XXList list = logic.getList(id);
   return list.toJSONString();
  } catch (Exception e) {
   e.printStackTrace();
  }
  return null;
}

在jsp页面中适当地方，通过dwr调用后天java文件，并对返回json对象做适当处理即可。

XXXXListener.method(result.id+ "",{
       callback : function(data) {
        if (data) {
         var json = window.eval(data);
         DWRUtil.removeAllOptions(下拉框的对象);
         json.splice(0,0,{departmentid:'',departmentname:'-------请选择------'});
         DWRUtil.addOptions('dept2',json,'departmentid','departmentname');
        }
       }
      });

非洲小白脸 2011-06-23 17:36 发表评论

dwr框架(菜鸟入门) 转载

非洲小白脸 — Wed, 03 Feb 2010 07:21:00 GMT

DWR（Direct Web Remoting）是一个开源的类库,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样.

DWR采取了一个类似AJAX的新方法来动态生成基于JAVA类的JavaScript代码.这样WEB开发人员就可以在JavaScript里使用Java代码就像它们是浏览器的本地代码(客户端代码)一样;但是Java代码运行在WEB服务器端而且可以自由访问WEB 服务器的资源.出于安全的理由,WEB开发者必须适当地配置哪些Java类可以安全的被外部使用.

要使用dwr要先下载http://getahead.org/dwr/
    下载内容
    DownloadVersion 2.0.3Size
    JAR File: dwr.jar(489Kb)
    WAR File:dwr.war(2.14Mb)
    Sources:dwr-2.0.3-src.zip (20.78Mb)

首先看下工程里面:

多了dwr.jar(dwr jar包),dwr.xml(dwr的配置文件),dwr20.dtd(在编辑xml配置文件时，提供自动提示功能)，其实web.xml配置文件也配置了dwr的servlet，来看下：

至于这个url为什么还要用"/dwr/*"还不是很清楚，我想的是如果客户端有请求过来经过dwr的都被指定的servler处理（个人理解）。

在来看下dwr.xml的配置：

红线框的是关于dwr智能提示的配置，里面蓝线框的是上面提到的dwr20.dtd的路径，如果路径或者文件名不对，那么前面就会出现警告：

如果出错了也无所谓，只不过是不能智能提示，如果你能把这写节点记住的话，那就不需要了，否则就把dwr20.dtd拷贝到与dwr.xml相同的目录下。

在看重要的部分dwr的节点：

标签中包括可以暴露给javascript访问的东西。

标签中指定javascript中可以访问的java类，并定义DWR应当如何获得要进行远程的类的实例。creator="new"属性指定java类实例的生成方式，new意味着DWR应当调用类的默认构造函数来获得实例，其他的还有spring方式，通过与IOC容器Spring进行集成来获得实例等等。javascript="sayHello"属性指定javascript代码访问对象时使用的名称。

name这里一般用class指一个类，value指类的全名，包括包名。

好了配置文件我们算做好了，在来看看jsp中在JavaScript中所做的配置。

第一个是dwr的引擎js文件，第二个是用户自己要访问java的类的js文件。

在来看看JavaScript调用java类的方法

注意这里的sayHello还有上面配置的sayHello.js（文件名）要和dwr.xml中配置JavaScript的名字要相同，否则就报错。

下来看下java类中的方法。

在上面的JavaScript中有人就想问，为什么调用Hello的方法时要传入一个函数。来说下，第一个是java方法的参数，第二个方法是回调函数，这个函数是负责接受JavaScript调用java类后返回的结果。

到这里一个简单的dwr框架就搞完了，来先看下是否成功，启动jsp的服务器，然后下图：

点击查看文件，先把里面所有的东西删除了，然后浏览你的jsp页面，就出出现一下2个文件

就是我们刚才配置的两个js文件，如果客户端通过JavaScript调用sayHello.Hello的话，那么就会由sayHello.js处理，然后转交给engine引擎，之后由引擎向服务器请求。

来看下效果，

很好，看来运行很好，但是发现个问题，我刚才在配置文件里配置的com.dwr.sayHello中所有的方法我们都可以访问的嘛？其实并不是这样的，要是不设置的话，就默认允许调用所有的方法，要是想要指定的方法允许访问，那么就要在dwr.xml中配置了。来看：

好了，具体配置就是这样的。

非洲小白脸 2010-02-03 15:21 发表评论

AJAX JQuery

非洲小白脸 — Mon, 10 Aug 2009 02:18:00 GMT

摘要: Normal 0 0 2 false false false MicrosoftInternetExplorer4 /* Style Definitions */ table.MsoNormalTable {mso-style-name:標準の表; mso-tstyle-rowba... 阅读全文

非洲小白脸 2009-08-10 10:18 发表评论

jQuery中对html对象的操作

非洲小白脸 — Wed, 05 Aug 2009 04:36:00 GMT

jQuery（javascript）中对html对象的操作：

$("input[@name=prj]").val()：取得input标签下面的属性等于prj的对象的值。

$("select[@name=sub]").val():取得select标签下面的属性等于sub的对象的值。

$('#proId').attr("value", value1)：JSP中ID为proId的对象，将它的值赋为value1。
$('#proId').attr("disabled", "true")：设置为不能编辑。
$('#proId').removeAttr("disabled")：设置为可编辑。

jQuery中$('#proId') 等同于 javascript中document.getElementById("proId");

非洲小白脸 2009-08-05 12:36 发表评论

jQuery介绍（自我学习）

非洲小白脸 — Tue, 04 Aug 2009 09:48:00 GMT

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。
jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
Jquery是继prototype之后又一个优秀的Javascrīpt框架。对 prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和 jquery：prototype就像Java，而jquery就像ruby.实际上我比较喜欢java（少接触Ruby 罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。

[编辑本段]
一，找到你了！

还记得$()这个东西吧？无论prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的：
代码
var someElement = $("#myId");
看起来比其他两个框架的要多了一个#，好，看看下面的用法：
代码
$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); // (3)
$("table a",context); // (4)
在prototype里看过这样的写法吗？第一行代码得到所有标签下的P元素。第二行代码得到class 为container的元素,第三行代码得到标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
如果你熟悉CSS，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。

[编辑本段]
二，Jquery对象？

jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）：
代码
var a = $("#cid");
var b = $("hello");
var c = document.createElement("table");
var tb = $©;

[编辑本段]
三，代替body标签的onload

这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码：
代码
$(document).ready(function(){
alert("hello");
});(1)
（2）
上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$(document).ready (fn)可以在一个页面中重复出现，而不会冲突。基本上Jqeury的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来，在初始化时不会发生冲突。
不管怎么说，这个惯例可以分离javascrīpt与HTML。推荐使用。

[编辑本段]
四，事件机制

我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascrīpt代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道“事件”这个名词。
代码
$(document).ready(function(){
$("#clear").click(function(){
alert("i am about to clear the table");
});
$("form[0]").submit(validate);
});
function validate(){
//do some form validation
}

[编辑本段]
五，同一函数实现set

代码
$("#msg").html();
$("#msg").html("hello");
上面两行代码，调用了同样的函数。但结果却差别很大。
第一行是返回指定元素的HTML值，第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。

[编辑本段]
六，ajax

这是一个ajax横行的时代。多少人，了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常
代码
$.get("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (1)
$.post("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (2)
$("#msg").ajaxStart(function(){
this.html("正在加载。。。。");
});(3)
$("#msg").ajaxSuccess(function(){
this.html("加载完成！");
});(4)
这些都是较常用的方法，get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。
3，4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然，jquery的AJAX相关的函数不仅是这些，有兴趣可以去研究再多。

[编辑本段]
七，渐入淡出

代码
$("#msg").show("fast");
$("#msg").hide("slow");
没错，上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条，用jquery就那么简单。两个函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。

[编辑本段]
八，plugin

这也是一个插件的时代。
jquery插件给我的感觉清一色的清洁，简单。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好，很精彩的插件。
写得很烂。可能大家看不出jquery的好处。嗯，光听是没用的，试用一下吧。你会发觉很有趣。
暂时告一段落吧。待有新的发现再来分享。
加一些Jquery的资源：
http://www.visualjquery.com/index.xml 很好的API查询站点
http://jquery.com/demo/thickbox/ 知道lightBox吧，看看Jquery是怎样实现相同的东西
http://jquery.org.cn/visual/cn/index.xml //不错的JQUERY 中文学习推荐
jquery来源
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。
jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
jQuery的最新release版本是1.2.6。
官方下载地址为：http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js
微软的visual studio 2008 sp1支持对jquery的动态提示，只要在代码页导入对应的vsdoc脚本就可以。
目前为止，jQuery的最新版本为1.3.2

非洲小白脸 2009-08-04 17:48 发表评论

Ext.data.Store的基本用法

非洲小白脸 — Sat, 18 Jul 2009 09:53:00 GMT

Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件，无论是Grid还是ComboBox，都是通过它实现数据读取、类型转换、排序分页和搜索等操作的。



Ext.data.Store中有一个Ext.data.Record数组，所有数据都存放在这些Ext.data. Record实例中，为后面的读取和修改操作做准备。



Ext.data.Store的基本用法



在使用之前，首先要创建一个Ext.data.Store的实例，如下面的代码所示。





    var data = [   
        ['boy', 0],   
        ['girl', 1]   
    ];   
      
    var store = new Ext.data.Store({   
        proxy: new Ext.data.MemoryProxy(data),   
        reader: new Ext.data.ArrayReader({}, PersonRecord)   
    });   
      
    store.load();  




    var data = [  
        ['boy', 0],  
        ['girl', 1]  
    ];  
      
    var store = new Ext.data.Store({  
        proxy: new Ext.data.MemoryProxy(data),  
        reader: new Ext.data.ArrayReader({}, PersonRecord)  
    });  
      
    store.load();  


var data = [
['boy', 0],
['girl', 1]
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord)
});
store.load();




每个store最少需要两个组件的支持，分别是proxy和reader，proxy用于从某个途径读取原始数据，reader用于将原始数据转换成Record实例。



这里我们使用的是Ext.data.MemoryProxy和Ext.data.ArrayReader，将data数组中的数据转换成对应的几个PersonRecord实例，然后放入store中。



store创建完毕之后，执行store.load()实现这个转换过程。



经过转换之后，store里的数据就可以提供给Grid或ComboBox使用了，这就是Ext.data. Store的最基本用法。





Ext.data.Store对数据进行排序





Ext.data.Store提供了一系列属性和函数，利用它们对数据进行排序操作。



可以在创建Ext.data.Store时使用sortInfo参数指定排序的字段和排序方式，如下面的代码所示。





    var store = new Ext.data.Store({   
        proxy: new Ext.data.MemoryProxy(data),   
        reader: new Ext.data.ArrayReader({}, PersonRecord),   
        sortInfo: {field: 'name', direction: 'DESC'}   
    });  




    var store = new Ext.data.Store({  
        proxy: new Ext.data.MemoryProxy(data),  
        reader: new Ext.data.ArrayReader({}, PersonRecord),  
        sortInfo: {field: 'name', direction: 'DESC'}  
    });  


var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord),
sortInfo: {field: 'name', direction: 'DESC'}
});




这样，在store加载数据之后，就会自动根据name字段进行降序排列。对store使用store.setDefaultSort('name','DESC');也会达到同样效果。



也可以在任何时候调用sort()函数，比如store.sort('name', 'DESC');，对store中的数据进行排序。



如果我们希望获得store的排序信息，可以调用getSortState()函数，返回的是类似{field: "name", direction: " DESC"}的JSON对象。



与排序相关的参数还有remoteSort，这个参数是用来实现后台排序功能的。



当设置为remoteSort:true时，store会在向后台请求数据时自动加入sort和dir两个参数，



分别对应排序的字段和排序的方式，由后台获取并处理这两个参数，在后台对所需数据进行排序操作。



remoteSort:true也会导致每次执行sort()时都要去后台重新加载数据，而不能只对本地数据进行排序。





Ext.data.Store从store中获取数据



从store中获取数据有很多种途径，可以依据不同的要求选择不同的函数。



最直接的方法是根据record在store中的行号获得对应的record，得到了record就可以使用get()函数获得里面的数据了，如下面的代码所示。





    store.getAt(0).get('name')  




    store.getAt(0).get('name')  


store.getAt(0).get('name')




通过这种方式，我们可以遍历store中所有的record，依次得到它们的数据，如下面的代码所示。





    for (var i = 0; i < store.getCount(); i++) {   
        var record = store.getAt(i);   
        alert(record.get('name'));   
    }  




    for (var i = 0; i < store.getCount(); i++) {  
        var record = store.getAt(i);  
        alert(record.get('name'));  
    }  


for (var i = 0; i < store.getCount(); i++) {
var record = store.getAt(i);
alert(record.get('name'));
}




Store.getCount()返回的是store中的所有数据记录，然后使用for循环遍历整个store，从而得到每条记录。



除了使用getCount()的方法外，还可以使用each()函数，如下面的代码所示。





    store.each(function(record) {   
        alert(record.get('name'));   
    });  




    store.each(function(record) {  
        alert(record.get('name'));  
    });  


store.each(function(record) {
alert(record.get('name'));
});




Each()可以接受一个函数作为参数，遍历内部record，并将每个record作为参数传递给function()处理。



如果希望停止遍历，可以让function()返回false。



也可以使用getRange()函数连续获得多个record，只需要指定开始和结束位置的索引值，如下面的代码所示。





    var records = store.getRange(0, 1);   
      
    for (var i = 0; i < records.length; i++) {   
        var record = records[i];   
        alert(record.get('name'));   
    }  




    var records = store.getRange(0, 1);  
      
    for (var i = 0; i < records.length; i++) {  
        var record = records[i];  
        alert(record.get('name'));  
    }  


var records = store.getRange(0, 1);
for (var i = 0; i < records.length; i++) {
var record = records[i];
alert(record.get('name'));
}






如果确实不知道record的id，也可以根据record本身的id从store中获得对应的record，如下面的代码所示。







    store.getById(1001).get('name')  




    store.getById(1001).get('name')  


store.getById(1001).get('name')






EXT还提供了函数find()和findBy()，可以利用它们对store中的数据进行搜索，如下面的代码所示。





    find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch],[Boolean caseSensitive] )   




    find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch],[Boolean caseSensitive] )   


find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch],[Boolean caseSensitive] )






在这5个参数中，只有前两个是必须的。



第一个参数property代表搜索的字段名；



第二个参数value是匹配用字符串或正则表达式；



第三个参数startIndex表示从第几行开始搜索;



第四个参数anyMatch为true时，不必从头开始匹配；



第五个参数caseSensitive为true时，会区分大小写。



如下面的代码所示：





    var index = store.find('name','g');   
      
    alert(store.getAt(index).get('name'));  




    var index = store.find('name','g');  
      
    alert(store.getAt(index).get('name'));  


var index = store.find('name','g');
alert(store.getAt(index).get('name'));






与find()函数对应的findBy()函数的定义格式如下：





    findBy( Function fn, [Object scope], [Number startIndex] ) : Number  




    findBy( Function fn, [Object scope], [Number startIndex] ) : Number  


findBy( Function fn, [Object scope], [Number startIndex] ) : Number






findBy()函数允许用户使用自定义函数对内部数据进行搜索。



fn返回true时，表示查找成功，于是停止遍历并返回行号。



fn返回false时，表示查找失败（即未找到），继续遍历，如下面的代码所示。







    index = store.findBy(function(record, id) {   
        return record.get('name') == 'girl' && record.get('sex') == 1;   
    });   
      
    alert(store.getAt(index).get('name'));  




    index = store.findBy(function(record, id) {  
        return record.get('name') == 'girl' && record.get('sex') == 1;  
    });  
      
    alert(store.getAt(index).get('name'));  


index = store.findBy(function(record, id) {
return record.get('name') == 'girl' && record.get('sex') == 1;
});
alert(store.getAt(index).get('name'));






通过findBy()函数，我们可以同时判断record中的多个字段，在函数中实现复杂逻辑。



我们还可以使用query和queryBy函数对store中的数据进行查询。



与find和findBy不同的是，query和queryBy返回的是一个MixCollection对象，里面包含了搜索得到的数据，如下面的代码所示。





    alert(store.query('name', 'boy'));   
      
    alert(store.queryBy(function(record) {   
        return record.get('name') == 'girl' && record.get('sex') == 1;   
    }));  




    alert(store.query('name', 'boy'));  
      
    alert(store.queryBy(function(record) {  
        return record.get('name') == 'girl' && record.get('sex') == 1;  
    }));  


alert(store.query('name', 'boy'));
alert(store.queryBy(function(record) {
return record.get('name') == 'girl' && record.get('sex') == 1;
}));






Ext.data.Store更新store中的数据



可以使用add(Ext.data.Record[] records)向store末尾添加一个或多个record，使用的参数可以是一个record实例，如下面的代码所示。





    store.add(new PersonRecord({   
        name: 'other',   
        sex: 0   
    }));  




    store.add(new PersonRecord({  
        name: 'other',  
        sex: 0  
    }));  


store.add(new PersonRecord({
name: 'other',
sex: 0
}));




Add()的也可以添加一个record数组，如下面的代码所示：





    store.add([new PersonRecord({   
        name: 'other1',   
        sex: 0   
    }), new PersonRecord({   
        name: 'other2',   
        sex: 0   
    })]);  




    store.add([new PersonRecord({  
        name: 'other1',  
        sex: 0  
    }), new PersonRecord({  
        name: 'other2',  
        sex: 0  
    })]);  


store.add([new PersonRecord({
name: 'other1',
sex: 0
}), new PersonRecord({
name: 'other2',
sex: 0
})]);






Add()函数每次都会将新数据添加到store的末尾，这就有可能破坏store原有的排序方式。如果希望根据store原来的排序方式将新数据插入到对应的位置，可以使用addSorted()函数。它会在添加新数据之后立即对store进行排序，这样就可以保证store中的数据有序地显示，如下面的代码所示。





    store.addSorted(new PersonRecord({   
        name: 'lili',   
        sex: 1   
    }));  




    store.addSorted(new PersonRecord({  
        name: 'lili',  
        sex: 1  
    }));  


store.addSorted(new PersonRecord({
name: 'lili',
sex: 1
}));




store会根据排序信息查找这条record应该插入的索引位置，然后根据得到的索引位置插入数据，从而实现对整体进行排序。这个函数需要预先为store设置本地排序，否则会不起作用。



如果希望自己指定数据插入的索引位置，可以使用insert()函数。它的第一个参数表示插入数据的索引位置，可以使用record实例或record实例的数组作为参数，插入之后，后面的数据自动后移，如下面的代码所示。





    store.insert(3, new PersonRecord({   
        name: 'other',   
        sex: 0   
    }));   
      
    store.insert(3, [new PersonRecord({   
        name: 'other1',   
        sex: 0   
    }), new PersonRecord({   
        name: 'other2',   
        sex: 0   
    })]);  




    store.insert(3, new PersonRecord({  
        name: 'other',  
        sex: 0  
    }));  
      
    store.insert(3, [new PersonRecord({  
        name: 'other1',  
        sex: 0  
    }), new PersonRecord({  
        name: 'other2',  
        sex: 0  
    })]);  


store.insert(3, new PersonRecord({
name: 'other',
sex: 0
}));
store.insert(3, [new PersonRecord({
name: 'other1',
sex: 0
}), new PersonRecord({
name: 'other2',
sex: 0
})]);






删除操作可以使用remove()和removeAll()函数，它们分别可以删除指定的record和清空整个store中的数据，如下面的代码所示。





    store.remove(store.getAt(0));   
    store.removeAll();  




    store.remove(store.getAt(0));  
    store.removeAll();  


store.remove(store.getAt(0));
store.removeAll();






store中没有专门提供修改某一行record的操作，我们需要先从store中获取一个record。对这个record内部数据的修改会直接反映到store上，如下面的代码所示。





    store.getAt(0).set('name', 'xxxx');  




    store.getAt(0).set('name', 'xxxx');  


store.getAt(0).set('name', 'xxxx');






修改record的内部数据之后有两种选择：执行rejectChanges()撤销所有修改，将修改过的record恢复到原来的状态；执行commitChanges()提交数据修改。在执行撤销和提交操作之前，可以使用getModifiedRecords()获得store中修改过的record数组。



与修改数据相关的参数是pruneModifiedRecords，如果将它设置为true，当每次执行删除或reload操作时，都会清空所有修改。这样，在每次执行删除或reload操作之后，getModifiedRecords()返回的就是一个空数组，否则仍然会得到上次修改过的record记录





Ext.data.Store加载及显示数据



store创建好后，需要调用load()函数加载数据，加载成功后才能对store中的数据进行操作。load()调用的完整过程如下面的代码所示。





    store.load({   
        params: {start:0,limit:20},   
        callback: function(records, options, success){   
            Ext.Msg.alert('info', '加载完毕');   
        },   
        scope: store,   
        add: true  
    });  




    store.load({  
        params: {start:0,limit:20},  
        callback: function(records, options, success){  
            Ext.Msg.alert('info', '加载完毕');  
        },  
        scope: store,  
        add: true  
    });  


store.load({
params: {start:0,limit:20},
callback: function(records, options, success){
Ext.Msg.alert('info', '加载完毕');
},
scope: store,
add: true
});




1. params是在store加载时发送的附加参数。



2. callback是加载完毕时执行的回调函数，它包含3个参数：records参数表示获得的数据，options表示执行load()时传递的参数，success表示是否加载成功。



3. Scope用来指定回调函数执行时的作用域。



4. Add为true时，load()得到的数据会添加在原来的store数据的末尾，否则会先清除之前的数据，再将得到的数据添加到store中。



一般来说，为了对store中的数据进行初始化，load()函数只需要执行一次。如果用params参数指定了需要使用的参数，以后再次执行reload()重新加载数据时，store会自动使用上次load()中包含的params参数内容。



如果有一些需要固定传递的参数，也可以使用baseParams参数执行，它是一个JSON对象，里面的数据会作为参数发送给后台处理，如下面的代码所示。





    store.baseParams.start = 0;   
    store.baseParams.limit = 20;  




    store.baseParams.start = 0;  
    store.baseParams.limit = 20;  


store.baseParams.start = 0;
store.baseParams.limit = 20;




为store加载数据之后，有时不需要把所有数据都显示出来，这时可以使用函数filter和filterBy对store中的数据进行过滤，只显示符合条件的部分，如下面的代码所示。





    filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void  




    filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void  


filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void






filter()函数的用法与之前谈到的find()相似，如下面的代码所示。





    store.filter('name', 'boy');  




    store.filter('name', 'boy');  


store.filter('name', 'boy');




对应的filterBy()与findBy()类似，也可以在自定义的函数中实现各种复杂判断，如下面的代码所示。





    store.filterBy(function(record) {   
        return record.get('name') == 'girl' && record.get('sex') == 1;   
    });  




    store.filterBy(function(record) {  
        return record.get('name') == 'girl' && record.get('sex') == 1;  
    });  


store.filterBy(function(record) {
return record.get('name') == 'girl' && record.get('sex') == 1;
});






如果想取消过滤并显示所有数据，那么可以调用clearFilter()函数，如下面的代码所示。





    store.clearFilter();  




    store.clearFilter();  


store.clearFilter();






如果想知道store上是否设置了过滤器，可以通过isFiltered()函数进行判断。





Ext.data.Store其他功能



除了上面提到的数据获取、排序、更新、显示等功能外，store还提供了其他一些功能函数。





    collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array  




    collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array  


collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array






collect函数获得指定的dataIndex对应的那一列的数据，当allowNull参数为true时，返回的结果中可能会包含null、undefined或空字符串，否则collect函数会自动将这些空数据过滤掉。当bypassFilter参数为true时，collect的结果不会受查询条件的影响，无论查询条件是什么都会忽略掉，返回的信息是所有的数据，如下面的代码所示。





    alert(store.collect('name'));  




    alert(store.collect('name'));  


alert(store.collect('name'));




这样会获得所有name列的值，示例中返回的是包含了'boy'和'girl'的数组。



getTotalCount()用于在翻页时获得后台传递过来的数据总数。如果没有设置翻页，get- TotalCount()的结果与getCount()相同，都是返回当前的数据总数，如下面的代码所示。





    alert(store.getTotalCount());  




    alert(store.getTotalCount());  


alert(store.getTotalCount());






indexOf(Ext.data.Record record)和indexOfId(String id)函数根据record或record的id获得record对应的行号，如下面的代码所示。





    alert(store.indexOf(store.getAt(1)));   
    alert(store.indexOfId(1001));  




    alert(store.indexOf(store.getAt(1)));  
    alert(store.indexOfId(1001));  


alert(store.indexOf(store.getAt(1)));
alert(store.indexOfId(1001));






loadData(object data, [Boolean append])从本地JavaScript变量中读取数据，append为true时，将读取的数据附加到原数据后，否则执行整体更新，如下面的代码所示。





    store.loadData(data, true);  




    store.loadData(data, true);  


store.loadData(data, true);




Sum(String property, Number start, Number end):Number用于计算某一个列从start到end的总和，如下面的代码所示。





    alert(store.sum('sex'));  




    alert(store.sum('sex'));  


alert(store.sum('sex'));






如果省略参数start和end，就计算全部数据的总和。



store还提供了一系列事件（见下表），让我们可以为对应操作设定操作函数。

表　store提供的事件


    
        
            
            事件名
            
            
            参　　数
            
        
        
            
            add
            
            
            ( Store this, Ext.data.Record[] records, Number index )
            
        
        
            
            beforelaod
            
            
            ( Store this, Object options )
            
        
        
            
            clear
            
            
            ( Store this )
            
        
        
            
            datachanged
            
            
            ( Store this )
            
        
        
            
            load
            
            
            ( Store this, Ext.data.Record[] records, Object options )
            
        
        
            
            loadexception
            
            
            ()
            
        
        
            
            metachange
            
            
            ( Store this, Object meta. )
            
        
        
            
            remove
            
            
            ( Store this, Ext.data.Record record, Number index )
            
        
        
            
            update
            
            
            ( Store this, Ext.data.Record record, String operation )

至此，store和record等组件已经讲解完毕，下面我们主要讨论一下常用的proxy和reader组件。

非洲小白脸 2009-07-18 17:53 发表评论

Ext.data.Store介绍

非洲小白脸 — Sat, 18 Jul 2009 07:02:00 GMT

Ext.data.Store介绍

var store = new Ext.data.Store({      

     

    proxy:new Ext.data.ScriptTagProxy({url:'/xxx/xx.action'}),      

     

    reader:new Ext.data.JsonReader({      

     

        totalProperty:'results',      

     

        root:'template',      

     

        id:'id'     

     

    },Ext.data.Record.create([      

     

        {name:'templateid',mapping:'id',type:'int'},      

     

        {name:'templatename',mapping:'name'},      

     

        {name:'templateuser',mapping:'user'}      

     

    ]))      

     

});      

     

store.load({params:{start:0, limit:10}});

方法: Store( Object config ) 构造, config定义为...

{ autoLoad : Boolean/Object, //自动载入

baseParams : Object, //只有使用httpproxy时才有意义

data : Array,       //数据

proxy : Ext.data.DataProxy,//数据代理

pruneModifiedRecords : boolean,//清除修改信息 reader : Ext.data.Reader, //数据读取器

remoteSort : boolean, //远程排序?

sortInfo : Object, //{field: "fieldName", direction: "ASC|DESC"}这样的排序对象

url : String,       //利用url构造HttpProxy

}

你可以得到一个store 的长度：

store.data.items.length

你也可以得到store 中的某个值日。

方法是 store.data.item(i).name //name 是字段名称

非洲小白脸 2009-07-18 15:02 发表评论

事件名	参　　数
add	( Store this, Ext.data.Record[] records, Number index )
beforelaod	( Store this, Object options )
clear	( Store this )
datachanged	( Store this )
load	( Store this, Ext.data.Record[] records, Object options )
loadexception	()
metachange	( Store this, Object meta. )
remove	( Store this, Ext.data.Record record, Number index )
update	( Store this, Ext.data.Record record, String operation )

BlogJava-爪哇一角-文章分类-AJAX + jQuery

easyui-progressbar实例！

dwr动态加载下拉框

dwr框架(菜鸟入门) 转载

AJAX JQuery

jQuery中对html对象的操作

jQuery介绍（自我学习）

[编辑本段] 一，找到你了！

[编辑本段] 二，Jquery对象？

[编辑本段] 三，代替body标签的onload

[编辑本段] 四，事件机制

[编辑本段] 五，同一函数实现set

[编辑本段] 六，ajax

[编辑本段] 七，渐入淡出

[编辑本段] 八，plugin

Ext.data.Store的基本用法

Ext.data.Store介绍

Ext.data.Store介绍

[编辑本段]
一，找到你了！

[编辑本段]
二，Jquery对象？

[编辑本段]
三，代替body标签的onload

[编辑本段]
四，事件机制

[编辑本段]
五，同一函数实现set

[编辑本段]
六，ajax

[编辑本段]
七，渐入淡出

[编辑本段]
八，plugin