博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DataGrid参数
阅读量:5843 次
发布时间:2019-06-18

本文共 3949 字,大约阅读时间需要 13 分钟。

1.3.2

 

  data-options="singleSelect:true,collapsible:false,url:'/datagrid/getbasic'"   
参数 类型 说明 默认值及备注
 singleSelect  boolean  true:单选  false:多选  false
 collapsible  boolean  true:标题栏显示折叠按钮  false
 url  string  数据源  格式:{"total":3,"rows":[{},{},{}]}  
 iconCls  string  标题栏左侧图标  icon.css
 rownumbers  boolean  是否添加行号  false
 frozenColumns  array  这些列固定在左边,不会滚动  用于js生成
 fitColumns  boolean  自适应列宽  设置了此项就不要设置width。自动生成滚动条。速度较慢。
 striped  boolean      隔行变色 在默认CSS下没有效果
 nowrap  boolean  不折行  true
 idField  string    主键列  
 pagination  boolean  分页  false    如果分页,post回传:page=2&rows=10
 checkOnSelect  boolean    如果设置为 true,当用户点击一行的时候 checkbox checked(选择)/unchecked(取消选择)。 如果为false,当用户点击刚好在checkbox的时候,checkbox            checked(选择)/unchecked(取消选择)。这个属性从1.3版本以后可用。  true
selectOnCheck boolean     如果设置为true,点击checkbox将永远选择这行。如果设置为false,选择一个行将不会选择checkbox。这个属性从1.3版本以后可用。 true
pagePosition string 定义分页工具栏的位置.可用值有: 'top','bottom','both'。这个属性从1.3版本以后可用。 bottom
pageNumber number 当设置分页属性时,初始化分页码。 1
pageSize number 当设置分页属性时,初始化每页记录数。 10
 pageList  array  当设置分页属性时,初始化每页记录数列表。  [10,20,30,40,50]
queryParams object 当请求远程数据时,发送的额外参数。 {}
sortName string 当数据表格初始化时以哪一列来排序。  
sortOrder string 定义排序顺序,可以是'asc'或者'desc'(正序或者倒序)。 asc
remoteSort boolean 定义是否显示行底(如果是做统计表格,这里可以显示总计等)。 false
rowStyler function 返回样式,如:'background:red',function有2个参数:
index:行索引,从0开始.
row:对应于该行记录的对象。
 
loadFilter function 返回用以显示的已过滤数据,function有一个参数'data'表示原始数据,你可以将原始数据改变为规范的数据格式,该函数必须返回包含 'total'和'rows'属性的标准数据对象。  
editors object 定义当编辑一行时的编辑模式。 predefined editors
view object 定义数据表格的视图。 default view
 autoRowHeight  boolean  定义是否基于某行的内容设置行的高度.设置为false改善加载数据的性能.因为这个操作是在数据加载之后完成的.添加了true会增加加载的时间.  true
toolbar array,selector
  datagrid 顶部的工具栏. 可用值: 1) 一个数组,工具的options(配置项)和linkbutton相同. 2) 一个选择器指定工具栏.

定义工具栏 在div标签:

 

$('#dg').datagrid({ toolbar: '#tb' });< div id="tb">< a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>< a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>< /div>

通过数组定义工具栏:

$('#dg').datagrid({ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('edit')} },'-',{ iconCls: 'icon-help', handler: function(){alert('help')} }] });

 
method string 加载远程服务器数据的请求方法类型. post
loadMsg string 当从远程服务器加载数据的时候,显示的提示消息. Processing, please wait …
showHeader boolean 定义是否显示行标题 . true
showFooter boolean 定义是否显示行页脚.  格式:{"total":3,"rows":[{},{},{}],"footer":[{},{}]} false
scrollbarSize number 定义滚动条宽度 (当滚动条是垂直的时候) 或者高度(当滚动条是水平的时候). 18
 onLoadSuccess  function

数据加载完成后调用的方法

可以在这里固定行:

onLoadSuccess: function(){

     $(this).datagrid('freezeRow',0).datagrid('freezeRow',1);
    }

 
 rowStyler  function

 rowStyler: function(index,row){

     if (row.swbm_dm == '21308000005' ){
      return 'background-color:#6293BB;color:#fff;font-weight:bold;';
     }
}

 
       
  <th data-options="field:'swjg_dm',width:80,align:'center'">swjg_dm</th>
 field    字段名称  
 width    宽度  
 align    水平对齐方式  
halign   表头字符对齐方式  
 styler:cellStyler    通过调用方法设置本字段某些单元格特殊样式  <script type="text/javascript">
  function cellStyler(value,row,index){
   if (value < 30){
    return 'background-color:#ffee00;color:red;';
   }
  }
 </script>
 formatter:formatPrice  function   function formatPrice(val,row){
   if (val < 30){
    return '<span style="color:red;">('+val+')</span>';
   } else {
    return val;
   }
  }
 
 rowspan      
 colspan      
 resizable      
 hidden      
 checkbox      
 styler      
 editor      
       
       

固定左侧列

如果grid的宽高采用的是自适应,也就是设置了fit和fitColumns,那么grid列的width就不要设置了.否则可能冻结列设置没有效果

 

<thead frozen="true">  或  data-options="frozen:true"

<thead frozen="true">

        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
        </tr>
    </thead>
    <thead>
        <tr>
            <th data-options="field:'swjg_dm',width:80,align:'center',styler:cellStyler">swjg_dm</th>
            <th data-options="field:'swjg_mc',width:200,align:'left'">swjg_mc</th>
            <th data-options="field:'swbm_dm',width:80,align:'center'">swbm_dm</th>
            <th data-options="field:'swbm_mc',width:150,align:'left'">swbm_mc</th>
            <th data-options="field:'sj_swjg_dm',width:80,align:'center'">sj_swjg_dm</th>
            <th data-options="field:'xybz',width:60,align:'center'">xybz</th>
        </tr>
</thead>

转载于:https://www.cnblogs.com/dotnetmvc/p/3632201.html

你可能感兴趣的文章
iOS开发之视频压缩
查看>>
IOS学习笔记(六)之UISlider的概念和使用方法
查看>>
我的友情链接
查看>>
第九章 前七章总结考试答案
查看>>
Elasticsearch索引别名、Filtered索引别名、Template
查看>>
我的友情链接
查看>>
高性能HTTP加速器Varnish(配置篇)
查看>>
SylixOS下Shell命令行执行模块内函数
查看>>
我的友情链接
查看>>
我的学习笔记
查看>>
微交互:App成功的秘诀
查看>>
zabbix2.0安装与配置
查看>>
安装 apscheduler
查看>>
AndroidStudio——Unable to create Debug Bridge
查看>>
金庸笔下的爱情故事
查看>>
Cookie跨域操作
查看>>
像黑客一样使用Linux命令行(转载)
查看>>
MyBatis学习总结(五)——实现关联表查询
查看>>
java-web学习笔记(第五章)
查看>>
Linux命令行下操作php的经验总结
查看>>