温馨提示×

温馨提示×

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

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

Jquery Easyui Datagrid创建代码

发布时间:2020-06-24 08:37:10 阅读:951 作者:dreamsgo 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

引用easyui

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

javascript代码

$(function(){      $('#tt').datagrid({          url:'datagrid_data2.json',          columns:[[              {   field:'productid',                  title:'Product ID',                  width:120                  //rowspan:2                  //colspan:2                  //align:'center'                  //sortable:true                  //resizable:true                  //hidden:true                  //checkbox:true                  //formatter:function(value,row,index){}                  //styler:function(value,row,index){}                  //sorter:function(a,b){ }                  //editor:string,object               },                            {field:'listprice',title:'List Price',width:80,align:'right'},              {field:'unitcost',title:'Unit Cost',width:80,align:'right'},              {field:'attr1',title:'Attribute',width:250},              {field:'status',title:'Status',width:60,align:'center'}          ]],          frozenColumns:[[                 {field:'ck',checkbox:true},                 {field:'itemid',title:'Item ID',width:80,sortable:true}          ]],          //fitColumns:false,//true会导致列错位          //autoRowHeight:true,          toolbar:[{              iconCls: 'icon-edit',              text:'编辑',              handler: function(){alert('edit')}          },'-',{              iconCls: 'icon-help',              text:'帮助',              handler: function(){alert('help')}          }],          //striped:true,//条纹行,以区分行          //method:'post',          //nowrap:true,//false设置数据自动换行          //idField:'itemid',          loadMsg:'请稍候...',          pagination:true,//分页栏          rownumbers:true,//第一列显示自增序列          singleSelect:true         //checkOnSelect:true,          //selectOnCheck:true,          //pagePosition:'both',          //pageNumber:1,          //pageSize:10,          //pageList:[10,20,30,40,50],          //queryParams: {          //  name: 'easyui',          //  subject: 'datagrid'          //},          //sortName:'itemid',          //sortOrder:'desc',          //remoteSort:false,//true发送命令到服务器请求排序数据,false本地自己排序          //showHeader:true,          //showFooter:true,          //scrollbarSize:18,          //rowStyler:function(index,row,css){}          //loader:'json loader',          //loadFilter:function(data){}          //editors:'predefined editors',          //view:'default view'      });      //设置分页控件         $('#tt').datagrid('getPager').pagination({             pageSize: 10,//每页显示的记录条数,默认为10             pageList: [5,10,15],//可以设置每页记录条数的列表             beforePageText: '第',//页数文本框前显示的汉字             afterPageText: '页    共 {pages} 页',             displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'           /*onBeforeRefresh:function(){                $(this).pagination('loading');                alert('before refresh');                $(this).pagination('loaded');            }*/        });   }); 


 

html代码

<table id="tt"></table> 

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

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

AI

开发者交流群×