Jquery Easy UI学习(一)datagrid的使用

最新推荐文章于 2022-05-19 16:51:57 发布

软件工程师之路

最新推荐文章于 2022-05-19 16:51:57 发布

阅读量2.3k

点赞数

分类专栏： web开发文章标签： web应用 jquery datagrid url easyui

本文链接：https://blog.csdn.net/u010454069/article/details/43052133

版权

本文介绍了Easy UI中的DataGrid控件，详细讲解了如何通过属性、Column设置和事件来使用DataGrid。提供了两种初始化DataGrid的方法，并展示了数据加载、列格式化、事件监听以及方法调用的实例，帮助开发者灵活应对不同需求。

摘要由CSDN通过智能技术生成

Easy UI一个最常用的表格控件，这一篇，我们学习下DataGrid的使用及属性，

方法一：jsp中定义时，直接定义好属性等，还是使用data-options="..."设定属性，

<table id="verification_requirement_list" title="核查需求登记" class="easyui-datagrid"
style="width:900px;height:auto;"
   data-options="singleSelect:true,collapsible:true,url:'equipmentRequirement.json'">
  <thead>
   <tr>
    <th field="requirementNum" width="30">需求编号</th>
    <th field="equipmentName" width="30">设备名称</th>
    <th field="model" width="30">型号</th>
    <th field="equipmentNum" width="30">设备编号</th>
    <th field="checkTime" width="40">检定日期</th>
    <th field="checkEffectiveTime" width="40">检定有效日期</th>
    <th field="verificationTime" width="40">核查日期</th>
    <th field="verificationRequirements" width="40">核查要求</th>
    <th field="applyTime" width="30">申请时间</th>
    <th field="applyUser" width="20">申请人</th>
   </tr>
  </thead>
</table>

方法二：

jsp：jsp中定义好一个table

js：写一个方法，为jsp中定义好的table设定class

//加载表格
function loadGridData(equipmentId){

//设备变更履历设定
$('#data_list_tab').datagrid({

     title:'配置变更',
//    nowrap: false,
     url: urls.history.getEquipmentChgHistoryGridData,
     queryParams:{
     'equipmentId':equipmentId
     },
     sortName: 'changeTime',
     sortOrder: 'asc',
     remoteSort: false,
     idField:'changeTime',
     height : 210,
  onClickCell: onClickCell,

     columns:[[
     {field:'equipmentName',title:'设备名称',width:100,sortable:true,
            formatter:function(value,row,index){
           var detail = "<a hre