Grid的使用

Grid在web开发中，经常使用，用kissy可以很方便的生成出grid，但是现在的kissy1.3rc版还是有很多不令人满意的地方，比如分页的话，那数据根本列不出来，列高也有点问题，但是

总的说来，kissy还是很不错的！下面我用kissy做了一个小测试，数据是从淘宝jssdk接口中取的！至于grid类的一些详情方法可以去http://docs.kissyui.com/查看

<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
<html>
  <head>
    <title>index.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script src="http://a.tbcdn.cn/apps/top/x/sdk.js?t=120525.js"></script>
    <link href="http://docs.kissyui.com/kissy-bootstrap/docs/assets/css/dpl.css" rel="stylesheet"> 
    <script src="http://docs.kissyui.com/assets/import-kissy.js"></script>
    <script type="text/javascript">
           TOP.init({
            appKey : 21041761,/*appkey */
            channelUrl : 'http://127.0.0.1:8080/demo/channel.html'/* channel页面的URL */
          });
          KISSY.use('grid',function(S,Grid){
              var columns = [{
                title : '商品id',
                dataIndex :'num_iid',
                sortState :'ASC',
                width : 100
            },{
                title : '图片',
                dataIndex : 'pic_url',
                width : 70,
                renderer : function(value,record){
                    return "<img src='"+value+"_40x40.jpg' width='40' height='40'/>";
                }
            },{
                title : '商品标题',
                dataIndex :'title',
                width : 400
            },{
                title : '数量',
                dataIndex : 'num',
                width : 60
            },{
                title : '价格',
                dataIndex : 'price',
                width : 60
            }];
              (function(){
                TOP.api('rest','post',{
                      method:'taobao.items.onsale.get',
                      fields:'num_iid,title,pic_url,num,price',
                      session:'6100807488983be1c5e54cf7de7d589444428488b11c7f5308297792'
                  }
                  ,item);
            })();
            //获取出售中的商品回调
            function item(resp){
                  var data = resp.items.item,
                  store = new Grid.Store({autoLoad : false});
                  var grid = new Grid({
                      render:'#J_Grid1',
                      columns :  S.clone(columns),
                      width:750,
                      loadMask : true,
                      plugins:[Grid.Plugins.CheckSelection],
                      store : store
                  });
                  grid.render();
                  store.setResult(data);
            }
        });
       </script> 
  </head>
  
  <body>
    <div id="J_Grid1"></div> 
  </body>
</html>

看一下效果图！当然如果要做一个分页也很简单，就是在调接口的时候，对应添加pageNo和pageSize及可！代码很简单，就说一下renderer这个方法吧！其中value是指当前的这个数据

而record是指当前这一行的记录，如果要添加一列是前几列的和，那么这个很重要哦！我用这个主要是插入了一张图片，因为接口返回来的数据是一个链接，有点类似于flex的中渲染吧！

posted @ 2012-07-06 15:12  何长春  阅读(504)  评论(0)  编辑  收藏  举报