dojo小例子（5）EnhancedGrid+JsonRest，实现分页、添加、删除

浅浅的花香味﹌ 2022-08-25 09:29 160阅读 0赞

<script>
     require(['dojo/_base/array', 'dojo/_base/event', 'dojo/on',  'dojox/grid/EnhancedGrid',
    	      'dojox/grid/enhanced/plugins/IndirectSelection',
    	      'dojox/grid/enhanced/plugins/Pagination',
              'dojo/store/JsonRest',
              'dojo/store/Memory',
              'dojo/store/Cache',
              'dojo/data/ObjectStore',
              'dijit/form/Button', 'dojo/parser', 'dojo/domReady!'],
      function(array, event, on, EnhancedGrid, IndirectSelection, Pagination, JsonRest, Memory, Cache, ObjectStore, Button, parser){
        parser.parse();
       
        var url = "http://"+document.location.host;
    		
        json = //new Cache( // 如果不注释，会报错，后面详说
        	    new JsonRest({
    		        target: "/dojo/rest/getUsers?idx="
    			})/* ,
            	new Memory() // 如果不注释，会报错，后面详说
        ) */;
        store = new ObjectStore({objectStore: json});
        /*set up layout*/
        var layout = [[
          {'name': 'Column 1', 'field': 'id', 'width': '100px'},
          {'name': 'Column 2', 'field': 'name', 'width': '100px'},
          {'name': 'Column 3', 'field': 'desc', 'width': '200px'}
        ]];
    
        /*create a new grid*/
        grid = new EnhancedGrid({
            id: 'grid',
            store: store,
            structure: layout,
            //autoWidth:true, 
            autoHeight:true,
            rowSelector: '20px',
            plugins:{
    			indirectSelection: {headerSelector:true, width:'40px', styles:'text-align: center;'}, 
    			pagination: true
    		}, 
    		noDataMessage : "本单位当前无用户信息！"
        });
    
        /*append the new grid to the div*/
        grid.placeAt("gridDiv");
    
        /* attach an event handler */
        var i = 0;
        on(button2,'click',
    	    function(e){
        		if( i == 0 ){
        			i = grid.getTotalRowCount();
    			}
    	        /* set the properties for the new item: */
    	        var myNewItem = {id: ++i, name: "Mediate", desc: 'Newly added values'};
    	        /* Insert the new item into the store:*/
    	        store.newItem(myNewItem);
    	        store.save({onComplete: saveDone, onError: saveFailed}); // 
    	    }
        );
        /* attach an event handler */
        on(button1,'click',
    	    function(e){
    	        /* Get all selected items from the Grid: */
    	        var items = grid.selection.getSelected();
    	        if(items.length){
    	            
    	            array.forEach(items, function(selectedItem){
    	                if(selectedItem !== null){
    	                    /* Delete the item from the data store: */
    	                    store.deleteItem(selectedItem);
    	                }
    	            });
    	            store.save({onComplete: saveDone, onError: saveFailed }); // 
    	        }
    	        event.stop(e);
    	    }
        );
    
        /*Call startup() to render the grid*/
        grid.startup();
    
        function saveDone(){
        	console.log("Done saving.");
        }
        function saveFailed(err){
        	console.log("Save failed.");
        	console.log(err);
        }

上面为什么注释掉cache、memory呢？

因为JsonRest结合Cache、Memory为EnhancedGrid提供数据，增加数据时，  
store.save(\{onComplete: saveDone, onError: saveFailed\});  
数据增加成功，却调用onError方法，错误信息：TypeError: invalid 'in' operand object  
而去掉Cache、Memory，就不会报错了

后台分页处理请看这里：[http://blog.csdn.net/earthhour/article/details/17203515][http_blog.csdn.net_earthhour_article_details_17203515] dojo EnhancedGrid的两种实现方式对比

[http_blog.csdn.net_earthhour_article_details_17203515]: http://blog.csdn.net/earthhour/article/details/17203515

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 tp5+layui实现分页

layui和thinkphp5自己在百度上下载 html代码 <!DOCTYPE html> <html> <head> <meta c

青旅半醒/ 2023年03月01日 11:47/ 0 赞/ 170 阅读

相关 dojo小例子（11）grid编辑提交

选中grid某一行编辑，打开一个form表单显示这条记录进行编辑，完成后，表单提交时调用此方法把数据存入后台 function submit(){

痛定思痛。/ 2022年08月25日 12:50/ 0 赞/ 203 阅读

相关 dojo小例子（7）dijit.Dialog实现alert功能

![SouthEast][] function showMsg(message, title) { if( title == null )

朱雀/ 2022年08月25日 10:51/ 0 赞/ 187 阅读

相关 dojo小例子（5）EnhancedGrid+JsonRest，实现分页、添加、删除

<script> require(['dojo/_base/array', 'dojo/_base/event', 'dojo/on', 'dojox/gr

浅浅的花香味﹌/ 2022年08月25日 09:29/ 0 赞/ 161 阅读

相关 dojo小例子（19）EnhancedGrid分页描述description调整

EnhancedGrid默认分页描述是“第 1 - 10 个（共 50 项目数）”类似这种。但有时不能满足需要，我们希望自定义格式。可是设置pagination插件的属性d

客官°小女子只卖身不卖艺/ 2022年08月24日 11:09/ 0 赞/ 151 阅读

相关 dojo小例子（24）模拟鼠标选中Tree节点

dojo1.9版本下，以下方法是可行的： tree._setSelectedNodeAttr(treeNode); // tree是Tree的实例；treeNode是

「爱情、让人受尽委屈。」/ 2022年08月10日 14:53/ 0 赞/ 161 阅读

相关 dojo小例子（35）带校验功能SimpleTextarea

// 带校验功能的SimpleTextarea /// define(["dojo/_base/declare", "dijit/form/Simple

阳光穿透心脏的1/2处/ 2022年08月04日 15:43/ 0 赞/ 185 阅读

相关 dojo小例子（33）dojo.request.script通过JSONP实现跨域

dojo/request/script通过JSONP实现跨域请求数据，需要后台配合返回Javascript代码： require(["dojo/request/scr

Dear 丶/ 2022年08月04日 15:00/ 0 赞/ 231 阅读

相关 mybatis分页插件PageHelper小例子

1导入jar <dependency> <groupId>com.github.pagehelper</groupId> <artifactI

太过爱你忘了你带给我的痛/ 2022年06月13日 13:48/ 0 赞/ 150 阅读

相关小程序(uniapp)-实现分页功能

需求 `数据太多，一下加载不过来，所以需要触底再加载数据。数据加载中，提示加载中；数据加载完毕，提示没有数据` 大致思路分页(触发)时机利用

古城微笑少年丶/ 2021年08月31日 08:18/ 0 赞/ 899 阅读