JqueryEasyuiDatagrid创建代码

引用easyui

我们提供的服务有:网站建设、成都网站设计、微信公众号开发、网站优化、网站认证、秀英ssl等。为上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的秀英网站制作公司

  1.  
  2.  
  3.  
  4.  
  5.  

javascript代码

  1. $(function(){  
  2.     $('#tt').datagrid({  
  3.         url:'datagrid_data2.json',  
  4.         columns:[[  
  5.             {   field:'productid',  
  6.                 title:'Product ID',  
  7.                 width:120  
  8.                 //rowspan:2 
  9.                 //colspan:2 
  10.                 //align:'center' 
  11.                 //sortable:true 
  12.                 //resizable:true 
  13.                 //hidden:true 
  14.                 //checkbox:true 
  15.                 //formatter:function(value,row,index){} 
  16.                 //styler:function(value,row,index){} 
  17.                 //sorter:function(a,b){ } 
  18.                 //editor:string,object 
  19.  
  20.             },  
  21.               
  22.             {field:'listprice',title:'List Price',width:80,align:'right'},  
  23.             {field:'unitcost',title:'Unit Cost',width:80,align:'right'},  
  24.             {field:'attr1',title:'Attribute',width:250},  
  25.             {field:'status',title:'Status',width:60,align:'center'}  
  26.         ]],  
  27.         frozenColumns:[[  
  28.                {field:'ck',checkbox:true},  
  29.                {field:'itemid',title:'Item ID',width:80,sortable:true}  
  30.         ]],  
  31.         //fitColumns:false,//true会导致列错位 
  32.         //autoRowHeight:true, 
  33.         toolbar:[{  
  34.             iconCls: 'icon-edit',  
  35.             text:'编辑',  
  36.             handler: function(){alert('edit')}  
  37.         },'-',{  
  38.             iconCls: 'icon-help',  
  39.             text:'帮助',  
  40.             handler: function(){alert('help')}  
  41.         }],  
  42.         //striped:true,//条纹行,以区分行 
  43.         //method:'post', 
  44.         //nowrap:true,//false设置数据自动换行 
  45.         //idField:'itemid', 
  46.         loadMsg:'请稍候...',  
  47.         pagination:true,//分页栏 
  48.         rownumbers:true,//第一列显示自增序列 
  49.         singleSelect:true 
  50.         //checkOnSelect:true, 
  51.         //selectOnCheck:true, 
  52.         //pagePosition:'both', 
  53.         //pageNumber:1, 
  54.         //pageSize:10, 
  55.         //pageList:[10,20,30,40,50], 
  56.         //queryParams: { 
  57.         //  name: 'easyui', 
  58.         //  subject: 'datagrid' 
  59.         //}, 
  60.         //sortName:'itemid', 
  61.         //sortOrder:'desc', 
  62.         //remoteSort:false,//true发送命令到服务器请求排序数据,false本地自己排序 
  63.         //showHeader:true, 
  64.         //showFooter:true, 
  65.         //scrollbarSize:18, 
  66.         //rowStyler:function(index,row,css){} 
  67.         //loader:'json loader', 
  68.         //loadFilter:function(data){} 
  69.         //editors:'predefined editors', 
  70.         //view:'default view' 
  71.     });  
  72.     //设置分页控件    
  73.     $('#tt').datagrid('getPager').pagination({     
  74.         pageSize: 10,//每页显示的记录条数,默认为10    
  75.         pageList: [5,10,15],//可以设置每页记录条数的列表    
  76.         beforePageText: '第',//页数文本框前显示的汉字    
  77.         afterPageText: '页    共 {pages} 页',     
  78.         displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'   
  79.         /*onBeforeRefresh:function(){   
  80.             $(this).pagination('loading');   
  81.             alert('before refresh');   
  82.             $(this).pagination('loaded');   
  83.         }*/    
  84.     });   
  85. }); 


 

html代码

  1.  

 


分享标题:JqueryEasyuiDatagrid创建代码
文章出自:http://myzitong.com/article/gssccd.html