Jquery Easyui Datagrid创建代码

发布时间:2020-06-24 08:37:10 作者:dreamsgo
来源:网络 阅读:942

引用easyui

  1. <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> 
  2. <link rel="stylesheet" type="text/css" href="../themes/icon.css"> 
  3. <link rel="stylesheet" type="text/css" href="demo.css"> 
  4. <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> 
  5. <script type="text/javascript" src="../jquery.easyui.min.js"></script> 

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. <table id="tt"></table> 

 

推荐阅读:
  1. JQuery-EasyUI Datagrid数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
  2. Jquery EASYUI设计注意点

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

引用 css jquery

上一篇:html   上传图片,本页预览

下一篇:Ansible API 2.0解析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》