javascript代码实例教程-ExtJs 表格的实现

发布时间:2019-05-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ExtJs 表格的实现脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

PRint?<htML>&nbsp;
<head> 
    <;meta http-equiv="Content-tyPE" content="text/html; charset=gb2312"> 
    <tITle>Ext Buttons</title> 
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/> 
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 
    <script type="text/javascript" src="../../ext-all.js"></script> 
    <script type="text/javascript" src="../examples.js"></script> 
    <script type="text/javascript"> 
        Ext.onReady(function(){ 
            VAR sm = new Ext.grid.CheckboxSelectionModel(); 
            var cm = new Ext.grid.ColumnModel([ 
                new Ext.grid.RowNumberer(),//自动显示行号  
                sm,//复选框  
                {hearder:&#39;编号',dataindex:'id',sortable:true},//每一行对应表格的一列  
                {header:'姓名',dataIndex:'name'}, 
                {header:'性别',dataIndex:'sex',renderer:rendererSex}, 
                {header:'描述',dataIndex:'descn'}, 
                {header:'生日',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}//日期类型需要特别注意  
            ]); 
            function rendererSex(value){ 
                if(value == 'male'){ 
                    return "<span style = 'color:red;font-weight:bold'>男</span>"; 
                } 
                else{ 
                    return "<span style = 'color:green;font-weight:bold'>女</span>"; 
                } 
            } 
            var data = [['1','小斯','male','descn','1990-01-15T03:34:18'], 
                        ['2','卡卡','female','descn','1990-01-15T03:34:18'], 
                        ['3','c罗','male','descn','1990-01-15T03:34:18'], 
                        ['4','梅西','female','descn','1990-01-15T03:34:18'], 
                        ['5','比利亚','male','descn','1990-01-15T03:34:18'] 
                        ]; 
            //var cm = new Ext.grid.ColumModel(...) 负责创建表格的列信息  
            //header:首部显示文本  
            //dataIndex:列对应的记录集字段  
            //sortable:是否可排序  
            //renderer:渲染函数  
            //format列格式化信息  
            /*数据存储器Store*/ 
            var store = new Ext.data.Store({ 
                Proxy:new Ext.data.MemoryProxy(data), 
                reader:new Ext.data.ArrayReader({},[ 
                    {name:'id'}, 
                    {name:'name'}, 
                    {name:'sex'}, 
                    {name:'descn'}, 
                    {name:'date',type:'date',dateformat:'Y-m-dTH:i:s'}//显示日期类型数据,同时还需要在cm里进行配置  
                ]), 
                sortInfo:{field:"name",direction:"ASC"}//设置默认排序方式  
            } 
            ); 
 
            store.load(); 
 
            var grid = new Ext.grid.GridPanel({ 
                renderTo:'grid',//指示表格渲染到什么地方去  
                store:store,//数据存储器  
                cm:cm,//列定义信息  
                sm:sm,//复选框  
                autoHeight:true, 
            }); 
            } 
        ); 
    </script> 
</head> 
<body> 
    <p id = "grid"> 
    </p> 
</body> 
</html> 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../examples.js"></script>
 <script type="text/javascript">
  Ext.onReady(function(){
   var sm = new Ext.grid.CheckboxSelectionModel();
   var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),//自动显示行号
    sm,//复选框
    {hearder:'编号',dataIndex:'id',sortable:true},//每一行对应表格的一列
    {header:'姓名',dataIndex:'name'},
    {header:'性别',dataIndex:'sex',renderer:rendererSex},
    {header:'描述',dataIndex:'descn'},
    {header:'生日',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}//日期类型需要特别注意
   ]);
   function rendererSex(value){
    if(value == 'male'){
     return "<span style = 'color:red;font-weight:bold'>男</span>";
    }
    else{
     return "<span style = 'color:green;font-weight:bold'>女</span>";
    }
   }
   var data = [['1','小斯','male','descn','1990-01-15T03:34:18'],
      ['2','卡卡','female','descn','1990-01-15T03:34:18'],
      ['3','c罗','male','descn','1990-01-15T03:34:18'],
      ['4','梅西','female','descn','1990-01-15T03:34:18'],
      ['5','比利亚','male','descn','1990-01-15T03:34:18']
      ];
   //var cm = new Ext.grid.ColumModel(...) 负责创建表格的列信息
   //header:首部显示文本
   //dataIndex:列对应的记录集字段
   //sortable:是否可排序
   //renderer:渲染函数
   //format列格式化信息
   /*数据存储器Store*/
   var store = new Ext.data.Store({
    proxy:new Ext.data.MemoryProxy(data),
    reader:new Ext.data.ArrayReader({},[
     {name:'id'},
     {name:'name'},
     {name:'sex'},
     {name:'descn'},
     {name:'date',type:'date',dateformat:'Y-m-dTH:i:s'}//显示日期类型数据,同时还需要在cm里进行配置
    ]),
    sortInfo:{field:"name",direction:"ASC"}//设置默认排序方式
   }
   );

   store.load();

   var grid = new Ext.grid.GridPanel({
    renderTo:'grid',//指示表格渲染到什么地方去
    store:store,//数据存储器
    cm:cm,//列定义信息
    sm:sm,//复选框
    autoHeight:true,
   });
   }
  );
 </script>
</head>
<body>
 <p id = "grid">
 </p>
</body>
</html>

 

 ExtJs 表格的实现
 

 

 

 

 


 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-ExtJs 表格的实现全部内容,希望文章能够帮你解决javascript代码实例教程-ExtJs 表格的实现所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。