jquery 易ui数据网格使用参考详解

本文介绍了datagrid在jquery easyui中的使用，如下所示：

创建数据网格

向页面添加一个div或table标记，然后使用jquery获取这个标记并初始化一个datagrid。代码如下：

页面上的Div标签:

Div id='magazineGrid'/divjs代码：

$ ('# MagazineGrid ')。DataGrid ({height : 340，URL :' URL '，method :' post '，query params 3360 {'ID' 3360 ID}，idfield :' product ID '，striped: true，fitColumns: true，singleSelect: false，rownumbers: true，pagination: false，nowrap: false，pageSize: 10，Pagelist 宽度： 100，对齐： '左' }，{字段： '发行'，标题： '发行'，宽度： 100，对齐3360 '左' }，{字段： '价格'，标题： '价格'，宽度： 100，对齐： '右' }，{字段： '订单号'，标题： '订单号'，宽度： options: { min: 0，precision: 0 } }，onBeforeLoad:函数(param) { }，onLoadSuccess:函数(data) { }，onLoadError:函数(){ }，onClickCell:函数(rowIndex，field，value){ })； ajax请求返回的数据格式

Datagrid在创建后会根据url请求数据，这是通过ajax实现的。服务器应该在完成请求处理后返回带有row属性的数据。如果使用分页，则total属性是必需的：

var rst=new { total=iTotalCount，rows=entity list }；当涉及到ajax请求时，在请求时不可避免地会传入一些查询条件。我通常在onBeforeLoad事件中添加查询条件：

onBeforeLoad:函数(param){ var BiD=$(' # TxtBoid ')。val()；var all searchekey=$(' # txtalsearchekey ')。val()；param.bId=bId帕拉姆。all search key=all search key；}分页处理

要启用分页，在datagrid配置中，首先添加以下配置：

Pagination: true，这样分页工具栏就会出现在数据网格的底部。

此时，datagrid将在请求数据时自动添加分页信息：

Page:当前请求的页码行数：每页显示的行数。这两个参数值是在服务器端获取的，然后通过获取数据库中数据的总行数来完成数据处理。

关于复选框列

上面的js代码创建的datagrid已经添加了checkbox列，这是第一列。复选框列的宽度将是自适应的。

{field:' CK '，checkbox: true}，关于行号列

行号列的配置是全局设置的。如果设置为true，将添加一列来显示行号。

rownumbers: true行编辑功能的实现

Datagrid本身提供行编辑的功能。只需要两个步骤：

1.设置列的编辑器属性

2.手动触发编辑

第一步，我们需要在列配置中指定编辑器。编辑器有两个属性，类型和选项。有效的类型字符串是：

文本、文本区域、复选框、数字框、验证框、日期框、组合框、组合框

选项对应于这些控件的特定配置，包括事件。

Editor : { type : ' number box '，options: { min: 0，precision3360 0}}如果不需要特殊的选项配置，可以直接将类型字符串赋给editor。

编辑： '文本'第二步，我们需要监听数据网格的在线点击事件，或者单击一次事件，我更愿意监听单击一次事件，可以根据点击不同的字段来进入编辑模式，并设置单元格编辑控件的聚焦。

onClickCell:函数（行索引、字段、值){ beginEditing(行索引、字段、值)}这里调用了开始编辑方法：

var editIndex=未定义；var beginEditing=函数(行索引，字段，值){ if(字段！='数量)返回；if (rowIndex！=editIndex){ if(EndeDiting()){ $(' # magazineGrid ').datagrid('beginEdit '，RowIndex)；editIndex=row indexvar ed=$(' # magazineGrid ').datagrid('getEditor '，{ index: rowIndex，field: '数量' });$(ed.target).焦点()。bind('blur '，function(){ EndeDiting()；});} else { $('#magazineGrid ').datagrid('selectRow '，editIndex)；} } } var endEditing=function(){ if(editIndex==undefined){ return true } if($(' # magazineGrid ').datagrid('validateRow '，editIndex)){ var ed=$(' # magazineGrid ').datagrid('getEditor '，{ index: editIndex，field: '数量' });var number=$(ed.target).数字框(' GetVaLue ')；$('#magazineGrid ').数据网格(“GetRows”)[编辑索引]['数量]=数字；$('#magazineGrid ').datagrid('endEdit '，editIndex)；$('#magazineGrid ').datagrid('selectRow '，editIndex)；编辑索引=未定义；返回真；} else {返回false}}列格式化输出格式程序

在列的配种中设置格式程序

formatter:函数（值、行、索引){ if(row。用户){返回行。用户。姓名；} else {返回值；}}使用工具栏

toolbar: [{ text: 'Add '，iconcl : ' icon-Add '，处理程序： function(){ alert(' Add ')}，{ text: 'Cut '，iconcl : ' icon-Cut '，处理程序： function(){ alert(' Cut ')}，'-'，{ text: 'Save '，iconcl 3360 ' icon-Save '，处理程序33: function(){ alert(' Save ')}]]使用CardView效果

cardView效果是这样的：

cardView的代码：

var cardview=$ .extend({}，$.fn.datagrid.defaults.view，{ renderRow:函数（目标、字段、冻结、行索引、行数据){ var cc=[]；抄送。推送(' TD col span='字段。length ' style=' padd :10 px 5px；border :0 ' ')；if(！冻结){ var aa=行数据。itemid。拆分('-')；var img="衬衫“aa[1].gif '；抄送。push(' img src=' http : images/' img ' ' style=' width :150 px；float : left ' ')；抄送。push(' div style=' float : left；左边距left :20 px ' ')；for(var I=0；长度；i ) { var copts=$(目标)。datagrid('getColumnOption '，字段[I])；抄送。push(' PS pan class=' c-label ' ' copts。title ' :/span '行数据[字段[I]]'/p ')；} cc。push('/div ')；} cc。push('/TD ')；返回抄送。联接(" ")；}});$(函数(){ $('#tt ')).datagrid({ view : card view })；});cardView其实是使用了数据网格的视角配置，重写了其默认的renderRow方法。基于这种实现，我们可以显示更多样式的视图。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。