• DataGrid参数


    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',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',80,align:'center',styler:cellStyler">swjg_dm</th>
                <th data-options="field:'swjg_mc',200,align:'left'">swjg_mc</th>
                <th data-options="field:'swbm_dm',80,align:'center'">swbm_dm</th>
                <th data-options="field:'swbm_mc',150,align:'left'">swbm_mc</th>
                <th data-options="field:'sj_swjg_dm',80,align:'center'">sj_swjg_dm</th>
                <th data-options="field:'xybz',60,align:'center'">xybz</th>
            </tr>
    </thead>

  • 相关阅读:
    Selenium IDE
    selenium简介
    Java程序要操作数据库,一定要使用JDBC技术吗?
    JDBC几个接口分区叫什么?它们分别有什么用?
    JDBC的全称是什么?
    什么时候使用session?什么时候使用application?
    内置对象session和application的作用是什么?
    修改表单中为什么要使用隐藏域?
    如何创建一个不能修改的属性?
    如何修改属性?
  • 原文地址:https://www.cnblogs.com/dotnetmvc/p/3632201.html
Copyright © 2020-2023  润新知