EasyUI 之datagrid 使用 【DataGrid属性解释】

可选的参数

DataGrid 属性

覆写了 $.fn.datagrid.defaults.

参数名 类型 描述 默认值
title string Datagrid面板的标题 null
iconCls string 在面板上通过一个CSS类显示16x16图标。 null
border boolean 设置面板是否具有边框 TRUE
width number datagrid面板的宽度 auto
height number datagrid面板的高度 auto
columns array DataGrid列配置对象 null
frozenColumns array 冻结的列,被现实在左边 null
striped boolean 设置是否让单元格显示条纹。默认false。 FALSE
method string 通过该方法类型请求远程数据。默认post。 post
nowrap boolean 是否包裹数据,默认为包裹数据显示在一行 TRUE
idField string 标识字段,或者说主键字段 null
url string 请求数据的URL. null
loadMsg string 加载数据时显示的信息 Processing, please wait …
pagination boolean 是否显示分页工具栏 FALSE
rownumbers boolean    

DataGrid Columns 是一个数组对象, 数组里的对象也是一个数组,数组里的每一个小对象就是一个列字段,例如:Column 属性

columns:[[    {field:‘itemid‘,title:‘Item ID‘,rowspan:2,width:80,sortable:true},    {field:‘productid‘,title:‘Product ID‘,rowspan:2,width:80,sortable:true},    {title:‘Item Details‘,colspan:4}],[    {field:‘listprice‘,title:‘List Price‘,width:80,align:‘right‘,sortable:true},    {field:‘unitcost‘,title:‘Unit Cost‘,width:80,align:‘right‘,sortable:true},    {field:‘attr1‘,title:‘Attribute‘,width:100},    {field:‘status‘,title:‘Status‘,width:60}]]
名称 类型 描述 默认值
title string 列字段要现实的名称 undefined
field string 列字段 undefined
width number 宽度 undefined
rowspan number 单元格行数 undefined
colspan number 单元格列数 undefined
align string 文本对齐方式,同align属性. undefined
sortable boolean 是否可以被排序. undefined
checkbox boolean 是否具有多选框 undefined

Events(事件)

Name Parameters Description
onLoadSuccess none 调用远程数据成功是激活
onLoadError none 装载错误时激活
onClickRow rowIndex, rowData 点击一行时激活,参数包括:
rowIndex:点击的行数,从0开始
rowData: 当前行的数据
onDblClickRow rowIndex, rowData 双击一行是触发,参数包括:
rowIndex:点击的行数,从0开始
rowData: 当前行的数据
onSortColumn sort, order 对一列进行排序时激活,参数包括:
sort:排序字段名称
order: 排序规则,升序,降序
onSelect rowIndex, rowData 选中一行时激活,参数有:
rowIndex:选中的行数
rowData: 数据
onUnselect rowIndex, rowData 取消选中时激活,参数:
rowIndex:选中的行数
rowData: 数据

Methods(方法)

Name Parameter Description
options none 返回所有属性
resize none 重置大小布局
reload none 重新加载数据
fixColumnSize none 调整列的大小
loadData param 装载数据,以前的数据会被移除
getSelected none 返回选中的行,没有则返回空
getSelections none 返回所有的行,空则返回空数组
clearSelections none 取消所有选中
selectRow index 选中一行,参数为行号
selectRecord idValue 根据主键查询出一条记录
unselectRow index 取消选中一行
时间: 2024-08-06 11:17:27

EasyUI 之datagrid 使用 【DataGrid属性解释】的相关文章

关于EasyUI 1.5版Datagrid组件在空数据时无法显示"空记录"提示的BUG解决方法

https://www.cnblogs.com/baiyangyuanzi/p/6514913.html 问题:jQuery easyUI中Datagrid,在表格数据加载无数据的时候,如何显示“无记录”的提示语? 解决jQuery EasyUI 1.5.1版本的Datagrid,在处理新增表格加载的数据没有记录的时候,可显示“无记录”的提示语的方法. 官网的API更新里面并没有写明是API的属性名,经过查找资料,发现一下问题: 1.官网API更新的时候漏掉了该API,没有放出: 2.源代码需要

EasyUI 左侧 tree 右侧 DataGrid模板

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>组织架构管理</title> <script src="jquery-ea

【Jqurey EasyUI+Asp.net】---DataGrid的增、删、改、查

前面是写了两篇,但都不怎么完整,比较才刚开始学这个,都是摸着石头过河,一步一步的来.这两天终于把DataGrid的增删改查融合到一起了,所以分享一下,希望对和我一样的初学者都点帮助. 直接主题吧. 还是想说数据表吧,我建了一个很简单的表Rex_Test ID 自增序号 tName 姓名 tEmail 邮箱 前台代码: Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&quo

solr的schema.xml配置属性解释

schema.xml做什么? SOLR加载数据,创建索引和数据时,核心数据结构的配置文件是schema.xml,该配置文件主要用于配置数据源,字段类型定义,搜索类型定义等.schema.xml的配置直接影响搜索结果的准确性与效率. <types></types>节点 types节点主要用于搜索类型的定义,这里给出常用类型的定义. 1 <fieldType name="string" class="solr.StrField" sortM

7.maven配置文件中&lt;scope&gt;的6种配置属性解释(源自官方文档) -- 依赖的范围

7.maven配置文件中<scope>的6中配置属性解释 说明:我们知道在pom.xml中<scope>标签是设置依赖作用域的,那么具体的设置类型有哪几种,分别作用的什么时候呢? Dependency Scope Dependency scope is used to limit the transitivity of a dependency, and also to affect the classpath used for various build tasks. There

&lt;display:table&gt;常用属性解释

1.官方网址:http://www.displaytag.org/1.2/displaytag/tagreference.html 2.应用举例:<display:table name="requestScope.pageList" id="curPage" class="table table-striped" sort="external"  requestURI="${resource}/test/lis

EasyUI实战篇之datagrid:如何重新设置datagrid所配置的属性(options)并重新查询列表(relaod)

http://www.stepday.com/topic/?873 今天在使用EasyUI的datagrid列表组件想实现一个列表的展现,且列表上方有搜索条件,初始化的时候我是这样配置的: view sourceprint? 1.<table id="tBaoXiuList" title="" class="easyui-datagrid" style="width: 723px; height: auto" url=&

jquery easyui DataGrid 数据表格 属性

中文帮助请点这里:中文属性详解 以下为未完结版 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head>

[转载]EasyUI中数据表格DataGrid添加排序功能

我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前页的数据进行排序,不是我们想要用效果. 下面开始演示从服务器端排序功能. 第一步,启用EasyUI DataGrid的排序功能: 具体就是为列设置sortable属性,如下: { field: "SOID", title: "订单单号", width: "80