easyUI datagrid使用

1,---------------------------------------导入必要的文件----------------------------------------------------

<!-- 使用easyUi所需要的样式,和js文件 -->
  <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="../css/demo.css"/>
  <link rel="stylesheet" type="text/css" href="../css/smartpaginator.css"/>
  
  <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="../js/smartpaginator.js"></script>
2,在jsp页面添加下列html标签,注意这里设置的id.

<table id="xmjtList" width="500" high="700"></table>

3,使用jquery对上面的标签添加数据(这里就是datagrid的使用)

$(function() {
  //这里是datagrid的重点。 

$('#xmjtList').datagrid({
    
url:xmjtUrl,//获取数据的url(这里获取的数据要符合json数据格式)
    loadMsg:"正在加载数据,请等待!",
    singleSelect:true,//设置单选、多选。true单选,false 多选。
    rownumbers:true,
    singleSelect:true,
    autoRowHeight:false,
    pagination:true,
    pageSize:10,
    idField:'id',
    columns:[[//datagrid展示的列:合同id,项目名称,项目类型,承担单位。
              {field:'ck',checkbox:true,disable:true,title:'操作'},
        {field:'unid',title:'合同id',hidden:true,sortable:true},
        {field:'xmmc',title:'项目名称',width:150,sortable:true},
        {field:'xmlx',title:'项目类型',width:200,sortable:true},
        {field:'cddw',title:'承担单位',width:300,sortable:true}
          ]]
    });

      //设置分页控件  ,这里为datagrid添加客户端分页。前台数据获取的数据比较少的时候可以考虑使用。

//这是额外的,如果你不使用分页后面这段代码不用添加。 
         var p = $('#xmjtList').datagrid('getPager');  
         $(p).pagination({  
             pageSize: 10,//每页显示的记录条数,默认为10  
             pageList: [5,10,15],//可以设置每页记录条数的列表  
             beforePageText: '第',//页数文本框前显示的汉字  
             afterPageText: '页    共 {pages} 页',  
             displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'  
            
         });


  });

4,对于json不了解建议看下下面的网站。

http://www.json.org/

---------------------------------------

希望大家给点建议。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值