`
JavaSky66
  • 浏览: 38682 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery datagrid 的属性、事件

 
阅读更多

Options

DataGrid Properties

Override default with $.fn.datagrid.defaults.

NameTypeDescriptionDefault
title string The datagrid panel title text. null
iconCls string A CSS class that will provide a background image to be used as the header icon. null
border boolean True to show datagrid panel border. true
width number The width of datagrid width. auto
height number The height of datagrid height. auto
columns array The datagrid columns config object, see column properties for more details. null
frozenColumns array Same as the columns property, but the these columns will be frozen on left. null
striped boolean True to stripe the rows. false
method string The method type to request remote data. post
nowrap boolean True to display data in one line. true
idField string Indicate which field is an identity field. null
url string A URL to request data from remote site. null
loadMsg string When loading data from remote site, show a prompt message. Processing, please wait …
pagination boolean True to show a pagination toolbar on datagrid bottom. false
rownumbers boolean True to show a row number column. false
singleSelect boolean True to allow selecting only one row. false
fit boolean True to set size to fit it's parent container. false
pageNumber number When set pagination property, initialize the page number. 1
pageSize number When set pagination property, initialize the page size. 10
pageList array When set pagination property, initialize the page size selecting list. [10,20,30,40,50]
queryParams object When request remote data, sending additional parameters also. {}
sortName string Defines which column can be sorted. null
sortOrder string Defines the column sort order, can only be 'asc' or 'desc'. asc

Column Properties

The DataGrid Columns is an array object, which element is an array too.
The element of element array is a config object, which defines every column field.
code example:

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}
]]
NameTypeDescriptionDefault
title string The column title text. undefined
field string The column field name. undefined
width number The width of column. undefined
rowspan number Indicate how many rows a cell should take up. undefined
colspan number Indicate how many columns a cell should take up. undefined
align string Indicate how to align the column data. 'left','right','center' can be used. undefined
sortable boolean True to allow the column can be sorted. undefined
checkbox boolean True to show a checkbox. undefined

Events

NameParametersDescription
onLoadSuccess none Fires when remote data is loaded successfully.
onLoadError none Fires when some error occur to load remote data.
onClickRow rowIndex, rowData Fires when user click a row, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onDblClickRow rowIndex, rowData Fires when user dblclick a row, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onSortColumn sort, order Fires when user sort a column, the parameters contains:
sort: the sort column field name
order: the sort column order
onSelect rowIndex, rowData Fires when user select a row, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row
onUnselect rowIndex, rowData Fires when user unselect a row, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row

Methods

NameParameterDescription
options none Return the options object.
resize none Do resize and do layout.
reload none Reload the rows.
fixColumnSize none fix columns size.
loadData param Load local data, the old rows will be removed.
getSelected none Return the first selected row record or null.
getSelections none Return all selected rows, when no record selected, am empty array will return.
clearSelections none Clear all selections.
selectRow index Select a row, the row index start with 0.
selectRecord idValue Select a row by passing id value parameter.
unselectRow index Unselect a row.
分享到:
评论

相关推荐

    jquery easyui datagrid demo

    首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它可能包含了 Datagrid 的基本概念、用法、属性、方法和事件等信息。Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件,常用于表格数据的展示和...

    jquery easyui datagrid demo 详解

    在实际应用中,Datagrid 还有很多高级功能,如行选择、单击/双击事件、自定义工具栏、分组、合并单元格等,可以根据需求进行配置和扩展。通过熟练掌握 Datagrid 的使用,可以大大提高开发效率,为用户提供更加友好的...

    Jquery Datagrid 动态分页以及CRUD(增删改查)

    2. **读取(Read)**:前面已经提到了读取数据,主要是通过设置`url`属性从后端获取数据并填充到Datagrid中。 3. **更新(Update)**:当用户修改了表格中的数据,点击“保存”时,我们可以获取选中行的数据,然后...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在DataGrid的`columns`配置中,通过`editor`属性指定某一列使用combobox,并设置其`options`,如`url`、`valueField`和`textField`等。 2. **多级联动原理** 多级联动的核心在于监听`onSelect`事件。当用户在第一...

    DataGrid中嵌套DataGrid

    3. 进行事件处理:主DataGrid的ItemDataBound事件是一个关键的事件,可以在其中获取到内部DataGrid需要的数据,并对其进行绑定。 4. 处理分页和排序:嵌套的DataGrid可能需要独立的分页和排序功能,这需要在事件处理...

    使用jquery的datagrid经常遇到的问题

    可以通过设置 Datagrid 的列宽属性为百分比值,或者使用特定的事件来调整列宽。例如: ```javascript $('#myDatagrid').datagrid({ fitColumns: true }); ``` 设置 `fitColumns` 为 `true` 可以让 Datagrid 的列宽...

    JqueryEasyUI DataGrid例子

    2. **JavaScript 配置**:初始化 DataGrid,并设置其属性,如列定义、数据源等。 ```javascript $(function () { $('#dg').datagrid({ url: 'servletURL', // 后台 Servlet 的 URL,用于获取数据 columns: [[ // ...

    easyui datagrid 增加鼠标悬停弹窗事件

    - **监听事件**:首先,我们需要为Datagrid的每一行添加`mouseover`和`mouseout`事件监听器。 - **获取行数据**:在`mouseover`事件触发时,我们可以获取当前行的数据,这通常通过`$(this).data()`或`$(this)....

    jquery easyui datagrid 教程

    jQuery EasyUI Datagrid 是一个基于 jQuery 和 EasyUI 框架的数据网格组件,它提供了丰富的数据展示和操作功能,常用于构建数据密集型的Web应用。这个教程将深入讲解其核心概念、用法以及常见应用。 一、jQuery ...

    easyui DataGrid 数据表格 属性

    EasyUI 是一个基于 jQuery 的 UI 插件集合体,它提供了丰富的用户界面组件,包括 DataGrid,这是一个用于展示数据的表格组件。DataGrid 具有众多可配置的属性,可以帮助开发者构建功能强大的数据展示和管理界面。这...

    jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法

    6. 要禁用checkbox,可以通过jQuery选择器选中该行的checkbox元素,并设置其'disabled'属性为'true'。 示例代码如下: ```javascript // 假设dgObj是已经初始化的datagrid对象 onLoadSuccess:function(data){ // ...

    jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    jQuery Easyui DataGrid 是一个基于 jQuery 的用户界面插件,它提供了一种简单的方式来展示和编辑表格数据。DataGrid 组件支持分页、排序、搜索、和可编辑等功能。本文介绍了如何在 jQuery Easyui DataGrid 中实现...

    jeasyui-datagrid-datagrid

    JeasyUI DataGrid是一款基于jQuery的轻量级组件,它为开发者提供了丰富的功能,如数据分页、排序、过滤等,极大地提高了开发效率。本文将深入探讨JeasyUI DataGrid的使用方法、特性以及常见问题的解决方案。 1. **...

    JQuery Easy-UI DataGrid性能调优

    ### JQuery Easy-UI DataGrid性能调优 #### 概述 在使用JQuery Easy-UI DataGrid组件的过程中,用户可能会遇到一系列与性能相关的问题。这些问题不仅会影响用户体验,还可能导致应用程序响应速度下降。本文旨在...

    JQuery EasyUI DataGrid服务端分页时行号不延续的解决方法

    JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...

    easyUI datagrid 实现行上移,下移,置顶,置底,排序提交后台绑定键盘事件

    在IT领域,尤其是在Web开发中,EasyUI是一个广泛使用的JavaScript框架,它基于jQuery,提供了丰富的UI组件,如datagrid,用于创建数据展示表格。本话题主要关注如何在EasyUI的datagrid中实现行的动态操作,包括上移...

    Jquery-easyui的datagrid中文文档

    ### JQuery-easyui的datagrid中文文档解析 #### 核心概念与功能介绍 JQuery-easyui中的`datagrid`组件是一种强大的数据展示工具,它能够高效地处理和展示大量数据,支持分页、排序、搜索等多种功能。此文档旨在...

    jQuery Easyui datagrid连续发送两次请求问题

    总的来说,解决jQuery EasyUI datagrid连续发送两次请求问题的关键在于正确配置和使用datagrid的加载逻辑,避免在事件处理函数中进行额外的数据请求。同时,合理使用datagrid的各种功能选项,避免因为布局和显示设置...

    jquery easyui 表头固定 datagrid 弹出框 AJAX刷新页面

    在jQuery EasyUI中,可以通过设置datagrid的属性如`header`或使用特定的CSS样式来实现这一功能。 3. **弹出框(Popup Dialog)**: 在Web应用中,弹出框常用于显示详细信息或进行用户交互。EasyUI提供了dialog组件,...

    JQuery_EasyUI_DataGrid_编程经验

    JQuery EasyUI DataGrid 是一个基于 jQuery 和 EasyUI 框架的组件,主要用于创建功能丰富的数据表格。在使用 DataGrid 进行编程时,有以下几个关键知识点: 1. **数据提取与显示**: DataGrid 通过 `url` 属性从...

Global site tag (gtag.js) - Google Analytics