zoukankan      html  css  js  c++  java
  • dojo grid 编辑问题

    今天dojo grid编辑小问题,找了半天才找到问题,

    1、问题

    2、原因

    数据单元没有索引列->id

    3、修改前代码

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Demo: Editing in a Grid</title>
        <link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
        <link rel="stylesheet" href="dojox/grid/resources/Grid.css" />
        <link rel="stylesheet" href="dojox/grid/resources/claroGrid.css" />
    </head>
    <body class="claro">
    <h1>Demo: Editing in a Grid</h1>
    <p>The following grid shows the multiple editing capabilities built into dojox/grid/DataGrid.</p>
    <div id="grid"></div>
    <!-- load dojo and provide config via data attribute -->
    <script src="dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
    <script>
        require([
            "dojox/grid/DataGrid",
            "dojox/grid/cells",
            "dojo/store/Memory",
            "dojo/data/ObjectStore",
            "dojo/domReady!"
        ], function(DataGrid, cells, Memory, ObjectStore ){
            var grid;
            gridLayout = [{
                defaultCell: {  8, editable: true, type: cells._Widget, styles: 'text-align: right;'  },
                cells: [
                    { name: 'Date', field: 'col8',  10, editable: true},
                    { name: 'Priority', styles: 'text-align: center;', field: 'col1',  10},
                    { name: 'Mark', field: 'col2',  5, styles: 'text-align: center;'},
                    { name: 'Status', field: 'col3',styles: 'text-align: center;' },
                    { name: 'Message', field: 'col4',  10 },
                    { name: 'Amount', field: 'col5'},
                    { name: 'Amount', field: 'col5'}
                ]
            }];
    
            var data = [
                {  col1: "normal", col2: false, col3: "new", col4: 'But are not followed by two hexadecimal', col5: 29.91, col6: 10, col7: false, col8: new Date() },
                { col1: "important", col2: false, col3: "new", col4: 'Because a % sign always indicates', col5: 9.33, col6: -5, col7: false, col8: new Date() },
                {  col1: "important", col2: false, col3: "read", col4: 'Signs can be selectively', col5: 19.34, col6: 0, col7: true, col8: new Date() }
            ];
    
            var objectStore = new Memory({data:data});
    
            // global var "test_store"
            test_store = new ObjectStore({objectStore: objectStore});
    
            //    create the grid.
            grid = new DataGrid({
                store: test_store,
                structure: gridLayout,
                "class": "grid"
            }, "grid");
            grid.startup();
    
        });
    </script>
    </body>
    </html>

    4、修改地方

  • 相关阅读:
    程序、进程、线程区别与联系
    SQL常用知识与必须掌握的面试常问SQL语句
    快速搭建一个基于react的项目
    原生js判断设备类型
    在vue项目中设置BASE_URL
    纯前端实现数据导出excel文件
    原生js实现拖拽功能
    使用Echarts实现折线图的一点总结
    在vue项目中显示实时时间(年月日时分秒)
    在vue项目中使用MD5.js
  • 原文地址:https://www.cnblogs.com/GIScore/p/6170244.html
Copyright © 2011-2022 走看看