Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello dgrid</title>
    <style>
html,body,#grid{
    height: 100%;
    width: 100%;
}
    </style>
    <link rel="stylesheet" href="http://dojocdn.qiniudn.com/dojo-1.10.2/dojo/resources/dojo.css">
    <link rel="stylesheet" href="http://dojocdn.qiniudn.com/dojo-1.10.2/dgrid/css/dgrid.css">
    <link rel="stylesheet" href="http://dojocdn.qiniudn.com/dojo-1.10.2/dgrid/css/skins/claro.css">
    <script src='http://dojocdn.qiniudn.com/dojo-1.10.2/dojo/dojo.js'></script>
   
</head>
<body class="claro">
    <div id="grid"></div>
</body>
</html>
 
require([
            'dojo/_base/declare', 'dgrid/Grid', 'dgrid/Keyboard', 'dgrid/Selection','put-selector/put', 'dojo/domReady!'
        ], function (declare, Grid, Keyboard, Selection,put) {
       var pmData = [{
        "aqi": 40,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "西城官园",
        "path": "beijing/xichengguanyuan",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 23,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "密云镇",
        "path": "beijing/miyunzhen",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 38,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "丰台花园",
        "path": "beijing/fengtaihuayuan",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 39,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "石景山古城",
        "path": "beijing/shijingshangucheng",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 31,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "怀柔镇",
        "path": "beijing/huairouzhen",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 55,
        "aqimsg": "良",
        "collectTime": 1418798880775,
        "lvmsg": "lv-fine",
        "name": "北京",
        "path": "beijing/beijing",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 55,
        "aqimsg": "良",
        "collectTime": 1418798880775,
        "lvmsg": "lv-fine",
        "name": "北京美国大使馆",
        "path": "beijing/us-embassy",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 27,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "朝阳农展馆",
        "path": "beijing/chaoyangnongzhanguan",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 47,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "东四环北路",
        "path": "beijing/dongsihuanbeilu",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 25,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "东城东四",
        "path": "beijing/dongchengdongsi",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 28,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "朝阳奥体中心",
        "path": "beijing/chaoyangaotizhongxin",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 29,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "前门东大街",
        "path": "beijing/qianmendongdajie",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 30,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "东城天坛",
        "path": "beijing/dongchengtiantan",
        "source": "aqicn.org",
        "updateTime": "星期二20点",
        "values": {}
    }, {
        "aqi": 43,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "永定门内大街",
        "path": "beijing/yongdingmennadajie",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 53,
        "aqimsg": "良",
        "collectTime": 1418798880775,
        "lvmsg": "lv-fine",
        "name": "南三环西路",
        "path": "beijing/nansanhuanxilu",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 41,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "海淀北京植物园",
        "path": "beijing/haidianbeijingzhiwuyuan",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 49,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "门头沟龙泉镇",
        "path": "beijing/mentougoulongquanzhen",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 54,
        "aqimsg": "良",
        "collectTime": 1418798880775,
        "lvmsg": "lv-fine",
        "name": "昌平镇",
        "path": "beijing/changpingzhen",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 86,
        "aqimsg": "良",
        "collectTime": 1418798880775,
        "lvmsg": "lv-fine",
        "name": "京东南永乐店",
        "path": "beijing/jingdongnanyongledian",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 85,
        "aqimsg": "良",
        "collectTime": 1418798880775,
        "lvmsg": "lv-fine",
        "name": "京南榆垡",
        "path": "beijing/jingnanyufa",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 55,
        "aqimsg": "良",
        "collectTime": 1418798880775,
        "lvmsg": "lv-fine",
        "name": "西直门北大街",
        "path": "beijing/xizhimenbeidajie",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 31,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "西城万寿西宫",
        "path": "beijing/xichengwanshouxigong",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 35,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "海淀万柳",
        "path": "beijing/haidianwanliu",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 44,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "亦庄开发区",
        "path": "beijing/yizhuangkaifaqu",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 43,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "通州新城",
        "path": "beijing/tongzhouxincheng",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 33,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "顺义新城",
        "path": "beijing/shunyixincheng",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 43,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "大兴黄村镇",
        "path": "beijing/daxinghuangcunzhen",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 23,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "海淀北部新区",
        "path": "beijing/haidianbeibuxinqu",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 13,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "丰台云岗",
        "path": "beijing/fengtaiyungang",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 30,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "房山良乡",
        "path": "beijing/fangshanliangxiang",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }, {
        "aqi": 25,
        "aqimsg": "优",
        "collectTime": 1418798880775,
        "lvmsg": "lv-good",
        "name": "昌平定陵",
        "path": "beijing/changpingdingling",
        "source": "aqicn.org",
        "updateTime": "星期二21点",
        "values": {}
    }];
​
            // Create a new constructor by mixing in the components
            var CustomGrid = declare([ Grid, Keyboard, Selection ]);
​
            var columns=[{
            field:'name',
            label:'可选框',
            renderCell:function(object, value, node, options){
                return put('input[type=checkbox]');//使用put插件可以快速创建dom
            }
            },
             {
                field:'aqi',
                label:'空气质量'
             },{
                field:'aqimsg',
                label:'质量评级'
             },
             {
                field:'name',
                label:'测站名'
             },
             {
                field:'collectTime',
                label:'收集时间',
                get:function(obj){
                    var time=obj.collectTime;
                    return new       Date(time).toLocaleString();
                }
​
             }
​
            ];
            var grid = new CustomGrid({
                columns: columns,
                selectionMode: 'single', 
                cellNavigation: false 
            }, 'grid');
            grid.renderArray(pmData);
        });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kunkun12pro
0viewers