`
conanca
  • 浏览: 99744 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

jqGrid基础学习:4jqGrid的ColModel API

阅读更多

ColModel是jqGrid里面最核心的属性。大部分配置都在这里面进行。所有的属性的含义对应如下:

 

Property Type Description Default
align string Defines the alignment of the cell in the Body layer, not in header cell. Possible values: left, center, right.
定义单元格对齐方式;可选值:left, center, right。例如:

{name:’id’,align:’left’},实现左对齐。

left
classes string This option allow to add classes to the column. If more than one class will be used a space should be set. By example classes:’class1 class2′ will set a class1 and class2 to every cell on that column. In the grid css there is a predefined class ui-ellipsis which allow to attach ellipsis to a particular row. Also this will work in FireFox too.
置列的css。多个class之间用空格分隔,如:’class1 class2′ 。表格默认的css属性是ui-ellipsis。这个属性在火狐浏览器中也是有效的。
empty string
datefmt string Governs format of sorttype:date (when datetype is set to local) and editrules {date:true} fields. Determines the expected date format for that column. Uses a PHP -like date formatting. Currently ”/”, ”-”, and ”.” are supported as date separators. Valid formats are:
y,Y,yyyy for four digits year
YY, yy for two digits year
m,mm for months
d,dd for days.
当sorttype为date和编辑规则的date为true是有效。使用的格式和php一样。默认为Y-m-d
ISO Date (Y-m-d)
defval string The default value for the search field. This option is used only in Custom Searching and will be set as initial search.
查询字段的默认值。这个选项只在自定义所属中有效。
empty
editable boolean Defines if the field is editable. This option is used in cell, inline and form modules.
设定是否可以对单元格进行编辑{name:’id’,index:’id’, width:180,editable:true},
false
editoptions array Array of allowed options (attributes) for edittype option editing
编辑的一系列选项。{name:’__department_id’,index:’__department_id’,width:200,editable:true,edittype:’select’,editoptions: {dataUrl:”${ctx}/admin/deplistforstu.action”}},这个是演示动态从服务器端获取数据。
empty array
editrules array sets additional rules for the editable field editing
编辑的规则{name:’age’,index:’age’, width:90,editable:true,editrules: {edithidden:true,required:true,number:true,minValue:10,maxValue:100}},设定 年龄的最大值为100,最小值为10,而且为数字类型,并且为必输字段。
empty array
edittype string Defines the edit type for inline and form editing Possible values: text, textarea, select, checkbox, password, button, image and file.
编辑的类型,可为text、textarea,select、checkbox、password、button、image、file等。
text
fixed boolean If set to true this option does not allow recalculation of the width of the column if shrinkToFit option is set to true. Also the width does not change if a setGridWidth method is used to change the grid width.
如果设定为true的话,单元格的大小将无法进行调整(即不可更改其宽度),同样,调用setGridWidth的方法也不会改变其大小。
false
formoptions array Defines various options for form editing.
form编辑的一些选项
empty
formatoptions array Format options can be defined for particular columns, overwriting the defaults from the language file. See Formatter for more details.
对某些列进行格式化的设置
none
formatter mixed The predefined types (string) or custom function name that controls the format of this field.
对列进行格式化时设置的函数名或者类型

{name:’sex’,index:’sex’, align:’center’,width:60,editable:true,edittype:’select’,editoptions: {value:’0:待定;1:男;2:女’},formatter:function(cellvalue, options, rowObject){
             var temp = “<img src=’${ctx}/jquery-ui-1.7.2.custom/css/img/”
             if(cellvalue==1){
              temp = temp +”user-white.png”;
             } else if(cellvalue==2){
              temp = temp +”user-white-female.png”;
             } else {
              temp = temp + “user-silhouette.png”;
             }
             temp = temp + “‘ border=’0′ />”
             return temp;
            }},//返回性别的图标。

none
hidedlg boolean If set to true this column will not appear in the modal dialog where users can choose which columns to show or hide.
如果设置为true将显示在对话框中,可以让用户选择该列是显示或隐藏。
false
hidden boolean Defines if this column is hidden at initialization.
定义在初始化的时候是否隐藏此列
false
index string Set the index name when sorting. Passed as sidx parameter.
索引。其和后台交互的参数为sidx
empty string
jsonmap string Defines the json mapping for the column in the incoming json string.
定义返回的json的映射。
none
key boolean In case if there is no id from server, this can be set as as id for the unique row id. Only one column can have this property. If there are more than one key the grid finds the first one and the second is ignored.
如果从服务器返回的数据没有id属性,那么此列将被作为唯一的属性而设置为id,只有一个列可以做这项设置。如果设置多于一个,那么只选取第一个,其他被忽略。
false
label string When colNames array is empty, defines the heading for this column. If both the colNames array and this setting are empty, the heading for this column comes from the name property.
如果colNames为空则用此值来作为列的显示名称,如果都没有设置则使用name 值
none
name string Set the unique name in the grid for the column. This property is required. As well as other words used as property/event names, the reserved words (which cannot be used for names) include subgrid, cb and rn.
必输项,表格列的名称,所有关键字,保留字都不能作为名称使用包括subgrid, cb and rn.
Required
resizable boolean Defines if the column can be re sized
是否可以改变大小(主要是宽)
true
search boolean When used in search modules, disables or enables searching on that column.
在搜索模式下,定义此列是否可以作为搜索列
true
searchoptions array Defines the search options used searching
设定搜索的选项。
empty
sortable boolean Defines is this can be sorted.
定义是否可以排序
true
sorttype string Used when datatype is local. Defines the type of the column for appropriate sorting.Possible values:
int/integer – for sorting integer
float/number/currency – for sorting decimal numbers
date – for sorting date
text – for text sorting
用在当datatype为local时,定义搜索列的类型,可选值:int/integer – 对integer排序float/number/currency – 排序数字date – 排序日期text – 排序文本
text
stype string Determines the type of the element when searching.
定义搜索元素的类型
text
surl string Valid only in Custom Searching and edittype : ‘select’ and describes the url from where we can get already-constructed select element
搜索的地址。只在自定义搜索和editype为select的时候有效。
empty string
width number Set the initial width of the column, in pixels. This value currently can not be set as percentage
在初始化的宽度,这个值不可以使用百分比的格式。初始化为150pixels。

{name:’id’,index:’id’, width:180,editable:true,editoptions:{readonly:true,size:10}}

150
xmlmap string Defines the xml mapping for the column in the incomming xml file. none
unformat function Custom function to “unformat” a value of the cell when used in editing Unformat is also called during sort operations. The value returned by unformat is the value compared during the sort.)
和format对应。
分享到:
评论

相关推荐

    jqGrid 中文大全(1)

    “jqGrid基础学习:4jqGrid的ColModel API”深入探讨了ColModel,它是定义表格列属性的关键部分。通过配置ColModel,可以自定义列的宽度、对齐方式、可编辑性等特性。 5. **jqGrid中的事件**: “jqGrid基础学习...

    jqGrid(版本:5.1.0)

    **jqGrid(版本:5.1.0)详解** ...学习jqGrid需要耐心和实践,官方文档和社区资源是宝贵的参考资料。不断探索和理解其内部机制,你会发现jqGrid是一个功能强大且灵活的工具,能够满足复杂的数据展示和操作需求。

    JqGrid中文API文档

    JqGrid是一款强大的JavaScript数据网格组件,用于在Web应用...通过深入学习JqGrid中文API文档,开发者可以充分利用其强大功能,创建功能丰富的数据展示和管理界面。结合提供的示例代码,实践应用将变得更加直观和便捷。

    jqgrid中文文档API

    本文将详细介绍jQgrid的中文文档API,涵盖了其原理、使用方法、参数配置、事件处理、数据处理、ColModel API等方面的知识点。 原理 jQgrid是典型的B/S架构,服务器端只是提供数据管理,客户端只是提供数据显示。...

    jqGrid_api中文文档

    文件中提及了jqGrid中的一些核心概念,例如ColModel API、参数配置、自定义搜索、搜索工具栏、搜索、自定义格式化类型、格式化、自定义按钮、翻页功能、配置json、方法和事件。这些内容涉及了如何通过编程方式操作...

    最新JQGrid4+ API

    在"最新JQGrid4+ API"中,我们可以深入理解JQGrid 4.*及以上版本的核心特性和使用方法。 一、JQGrid基本结构 JQGrid的初始化需要一个表格元素和相应的JavaScript配置。基本语法如下: ```html &lt;table id="grid"&gt;&lt;/...

    jqGrid基础学习_华水

    在"jqGrid基础学习_华水"系列中,我们可以期待学习到关于jqGrid的以下核心知识点: 1. **安装与引入**:了解如何下载和引入jqGrid及相关依赖,如jQuery和jQuery UI,以及如何在HTML页面中设置必要的脚本和样式链接...

    jqGrid 的使用笔记:1. 开始

    **jqGrid 使用笔记:开始** jqGrid 是一个强大的 jQuery 插件,用于创建灵活、功能丰富的数据网格。这篇笔记将引导我们逐步了解如何在项目中开始...通过学习和掌握 jqGrid,我们可以创建具有专业级别的数据管理界面。

    JqGrid 3.6 API中文版

    jqGrid 的 ColModel API 提供了丰富的列模型选项,帮助开发者快速构建复杂的数据表格。这些选项包括:列名、宽度、对齐方式等。 jqGrid 的 json 配置 jqGrid 提供了丰富的 json 配置选项,帮助开发者快速构建复杂...

    JQGrid系列教程

    * 配置 JQGrid 的参数,如 url、datatype、mtype、colNames、colModel 等 JQGrid 的参数 * url:获取数据的地址 * datatype:从服务器端返回的数据类型,默认 xml * mtype:ajax 提交方式,默认 GET * colNames:...

    jqGrid:六、 search

    **jqGrid:六、search** jqGrid是一款强大的jQuery插件,用于创建交互式的网格视图。在本章节中,我们将深入探讨jqGrid的搜索功能,它允许用户在数据网格中快速定位和过滤所需的信息。 首先,jqGrid的搜索功能提供...

    jqgrid加载本地数据并且分页例子

    4. **数据分页**:jqGrid的分页功能默认是启用的,只需设置`rowNum`和`pager`选项即可。当用户更改分页大小或点击分页按钮时,jqGrid会自动处理数据的切片和显示。 5. **数据排序**:在初始化jqGrid时,我们可以...

    jqGrid简单案例之API

    通过学习和实践这个案例,开发者可以掌握如何用jqGrid构建高效、交互性强的数据展示和管理界面。在实际项目中,可以根据需求进一步探索jqGrid的高级特性,如分组、子网格、自定义编辑器等,以满足更复杂的需求。

    jqgrid实现分组显示和统计

    jqGrid是一款功能强大的JavaScript表格插件,用于在Web页面中展示和操作数据。它支持多种功能,包括数据分页、排序、搜索、编辑等。在本教程中,我们将深入探讨如何利用jqGrid实现数据的分组显示和统计,这对于数据...

    jqGrid_各种参数_详解

    4. jqGrid 的参数 jqGrid 有多个参数,可以根据需要进行配置。以下是常用的 jqGrid 参数: * altRows:设置表格的交替行颜色。 * altclass:设置表格的交替行样式。 * autowidth:设置表格的自动宽度。 * caption...

    JQGrid4.0以上英文API文档

    本篇将详细解析4.0及以上版本的JQGrid英文API文档,以便离线查阅和学习。 **1. JQGrid初始化与基本设置** JQGrid的初始化通常通过`$("#gridId").jqGrid()`方法完成,其中`gridId`是表格元素的ID。初始化时可以设置...

    jqgrid学习笔记

    4. **jqGrid 原理**: jqGrid 遵循 B/S 架构,服务器端主要负责数据管理,而客户端负责数据显示。它使用 AJAX 技术来处理数据的获取和提交,使得数据能在客户端和服务器之间无缝流动。 5. **jqGrid 参数**: - **...

    jqGrid使用帮助[参照].pdf

    1. jquery.js:jQuery 库,是 jQgrid 的基础依赖项。 2. jquery.jqGrid.js:jQgrid 的主插件,提供了基本的表格功能。 3. grid.basic.js:基本插件,提供了基本的表格功能。 4. grid.custom.js:高级插件,提供了...

    jqgrid colModel中文配置文档

    jqGrid是一款功能强大的jQuery插件,用于创建交互式的表格,其中`colModel`是jqGrid的核心配置之一,它定义了表格列的各种属性和行为。在本篇文档中,我们将深入探讨`colModel`的各项配置选项。 1. `align`: 这个...

    jQGrid动态填充select下拉框的选项值(动态填充)

    在网页开发中,jQGrid是一款非常流行的JavaScript库,用于创建功能丰富的表格。它提供了许多高级功能,如数据检索、排序、过滤、编辑等。在某些场景下,我们需要动态地填充select下拉框的选项值,以实现更灵活的数据...

Global site tag (gtag.js) - Google Analytics