dojo小例子（4）DataGrid对动态数据的增删

本是古典何须时尚 2022-08-25 09:29 147阅读 0赞

<script>
     require(['dojo/_base/array', 'dojo/_base/event', 'dojo/on', 'dojox/grid/DataGrid', 
              'dojo/store/JsonRest',
              'dojo/store/Memory',
              'dojo/store/Cache',
              'dojo/data/ObjectStore',
              'dijit/form/Button', 'dojo/parser', 'dojo/domReady!'],
      function(array, event, on, DataGrid, JsonRest, Memory, Cache, ObjectStore, Button, parser){
        parser.parse();
        
        var url = "http://"+document.location.host;
    		
        json = new Cache(
        	    new JsonRest({
    		        target: url + "/dojo/rest/users?id=" // rest url
    			}),
            	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 DataGrid({
            id: 'grid',
            store: store,
            height: '200px',
            structure: layout,
            rowSelector: '20px'});
    
        /*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.rowCount;
    		     }
    	        /* 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);
    	                }
    	            });
    	        }
    	        event.stop(e);
    	        store.save({onComplete: saveDone, onError: saveFailed}); // 触发向后台提交动作
    	    }
        );
    
        /*Call startup() to render the grid*/
        grid.startup();
        
        function saveDone(){
        	console.log("Done saving.");
        }
        function saveFailed(err){
        	console.log("Save failed.");
        	console.log(err);
        }
    });
    </script>

<body class="claro">
        <p>
        This example shows, how to add/remove rows
    </p>
    <div id='gridDiv'></div>
    
    <p>
      <button data-dojo-id='button2' id='button2'>
          Add Row
      </button>
    
      <button data-dojo-id='button1' id='button1'>
          Remove Selected Rows
      </button>
    </p>
    </body>

发表评论取消回复

表情：

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

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

相关阅读

相关 dojo小例子（14）对提供给grid显示的数据进行预处理

有时我们从后台获取的数据不一定能满足页面显示的需求，比如后台数据中某个字段值是“1/0”，但是显示时我们希望显示为“是/否”。这就需要对数据进行转换，也就是预处理。可以有两

╰半橙微兮°/ 2022年08月27日 04:43/ 0 赞/ 122 阅读

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

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

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

相关 dojo小例子（9）动态创建带label的CheckBox集合

/ 循环创建带label的CheckBox集合 / require(["dijit/form/CheckBox","dojo/dom-co

比眉伴天荒/ 2022年08月25日 11:58/ 0 赞/ 177 阅读

相关 dojo小例子（4）DataGrid对动态数据的增删

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

本是古典何须时尚/ 2022年08月25日 09:29/ 0 赞/ 148 阅读

相关 dojo小例子（3）DataGrid对静态数据的增删

<!DOCTYPE html> <html > <head> <link rel="stylesheet" href="../doj

红太狼/ 2022年08月25日 09:28/ 0 赞/ 131 阅读

相关 dojo小例子（20）动态加载的Select增加一个option空白项

有时我们希望下拉菜单带有提示项，比如默认第一项是“--请选择--”；或者“--全部--”表示包含下拉菜单中的所有条件。有两种实现方式： 1、修改store，在其中添加数据

迷南。/ 2022年08月24日 11:40/ 0 赞/ 193 阅读

相关 dojo小例子（23）EnhancedGrid、DataGrid当加载完成后获取记录总数

require(["dojo/aspect"]); aspect.after(grid, "_onFetchComplete", function() { //

女爷i/ 2022年08月23日 11:52/ 0 赞/ 121 阅读

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

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

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

相关 DataGrid动态添加模板列的一个例子

数据源结构同http://blog.csdn.net/lovecherry/archive/2005/03/24/328455.aspx 表dep：depid（标识主键），

- 日理万妓/ 2022年01月06日 06:43/ 0 赞/ 200 阅读

相关动态数据添加(DataGrid)

[http://www.cnblogs.com/lovecherry/archive/2005/03/25/125526.aspx][http_www.cnblogs.com_

悠悠/ 2021年10月25日 12:22/ 0 赞/ 267 阅读