jqGrid如何使用jQuery UI

Sortable Columns（可排序列）

　　这个方法已经集成在jqGrid中，所有不需要附加的其他内容。这个方法通过鼠标点击对列表头对行进行重新排序，只需要在设置jqGrid的sortable为true即可，示例代码如下

jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid',
    sortable: true////////////////////////
  }); 
});

使用的 jQuery UI 部件和其他插件

jQuery UI 核心
jQuery UI 可排序部件

Column Chooser（列选择器）

使用此方法可以对列重新排序，并可以隐藏和显示列。调用方式

jQuery("#list").columnChooser(options);
//新API
jQuery("#list").jqGrid('columnChooser', options);

　　options为对象，详细查看下表。

　　要使用此方法需要在jqGrid之前首先加载jQuery multiselect 插件。调用此方法后，出现一个模态窗口，可以在窗口中对列重新排序，设置哪些列可见或者不可见。如下图所示 jqGrid如何使用jQuery UI

需要导入 ui.multiselect.css 和 ui.multiselect.js （Query UI Multiselect 插件API参考： http://plugins.jquery.com/project/Multiselect）

Options

配置名称	类型	描述	默认值
title	string	模态窗口标题（上图中的Select columns）	See $.jgrid.col.title in language file
width	number	模态窗口宽度（单位px）	420
height	number	模态窗口高度（单位px）	240
classname	string	给生成的select对象添加到样式	null
done	function	点击ok按钮触发的事件。目前实现方式为调用remapColumns 方法队列重新排序
msel	mixed	扩展多选select对象的部件类名称（msel is either the name of a ui widget class that extends a multiselect）或者为一个函数用于创建多选select对象（没有参数，或者传递一个对象）或者销毁它（设置为destroy）	multiselect
dlog	mixed	ui部件类名称或者未一个函数，用于创建对话框（参数为dlog_opts）或者销毁它（设置为destroy）	dialog
dlog_opts	mixed	传递给dlog的参数对象或者一个函数用于创建参数对象, 默认为ui.dialog创建适合的配置
cleanup	function	对话框清除函数，同时出发done事件，不重新排列（表示columnChooser终止了）

　　done事件默认定义

opts = $.extend({
...
"done" : function(perm) { if (perm) self.jqGrid("remapColumns", perm, true) },
...
});

　　列重新排列后要进行其他操作，可以重新定义这个配置。例如，在隐藏或者显示某些列时重新计算一些元素的宽度。示例代码如下

jQuery("#list").jqGrid('columnChooser', {
   done : function (perm) {
      if (perm) {
          // "OK" button are clicked
          this.jqGrid("remapColumns", perm, true);
          // the grid width is probably changed co we can get new width
          // and adjust the width of other elements on the page
          //var gwdth = this.jqGrid("getGridParam","width");
          //this.jqGrid("setGridWidth",gwdth);
      } else {
          // we can do some action in case of "Cancel" button clicked
      }
   }
});

使用的 jQuery UI 部件和其他插件

jQuery UI 核心
jQuery UI 可排序部件
jQuery UI 对话框
jQuery multiselect（多选）插件

　　 jQuery multiselect从这里下载： here.，此插件已经包含在jqGrid的plugins目录中，不重新下载也可以。

Sortable Rows（可排序行）

此方法允许通过鼠标重新排列（排序）数据行，调用方式

jQuery("#list").sortableRows(options);
//新 API
jQuery("#list").jqGrid('sortableRows', options);

　　options为对象，详细查看下表。此方法完全兼容jQuery UI sortable 部件，既可以设置任何jQuery UI sortable的配置和事件。插件详细配置和事件参考这里： here

使用的 jQuery UI 部件和其他插件

jQuery UI core
jQuery UI sortable widget.

存在的问题

目前此方法在FireFox versions 3.0.x， Chrome 和 Safari 浏览器因为sortable部件的一些小问题（Currently this method does not work correct in FireFox versions 3.0.x, Chrome and Safari browsers due to little problem in sortable widget），希望之后的jQuery UI.版本能改进
启用 treeGrid后此方法不能正常工作，既不能使用方法重新排列树的数据行

Resizable Grid（可调整大小的grid）

此方法可以通过鼠标调整表格的高度或者宽度，调用方式

jQuery("#list").gridResize(options);
//新API
jQuery("#list").jqGrid('gridResize', options);

　　options为对象，详细查看下表。此方法完全兼容jjQuery UI resizable widget.部件，既可以设置任何jQuery UI resizable widget.的配置和事件。插件详细配置和事件参考这里： here

使用的 jQuery UI 部件和其他插件

jQuery UI core
jQuery UI resizable widget.

存在的问题

使用表格隐藏按钮（表格标题栏右上角的箭头按钮）不会隐藏resizable widget.创建的内容。表现为表格隐藏后表格边框仍然显示（ This cause appearing of borders of the grid after it is hidden.）

Drag and Drop rows between grids（grid数据行拖放）

此方法允许在表格表格间拖放多行数据，调用方式

jQuery("#list").gridDnD(options);
//新 API
jQuery("#list").jqGrid('gridDnD', options);

options如下

名称	类型	描述	默认值
connectWith	string	定义数据行放置到的目标表格。如果目标表格为多个，使用逗号分隔开，如”#grid1, #grid2”	empty string
onstart	function	从源表格拖动行时触发的事件。事件参数为 event handler 和一个ui object。详细信息参考：jQuery UI draggable events	null
onstop	function	拖动停止时触发。事件参数为 event handler 和一个 object。详细信息参考： jQuery UI draggable events	null
beforedrop	function	在行放置到connectWidth配置的表格前触发。事件参数为 event handler， ui object， data（插入到目标表格的键值对数据），源表格（source grid）和目标表格（this）。事件返回键值对对象，将会插入到目标表格	null
ondrop	function	在行放置到connectWidth配置的表格后触发。事件参数为 event handler， ui object， data（插入到目标表格的键值对数据）。详细信息参考： jQuery UI droppable events	null
drop_opts	object	定义目标表格的选项配置（同connectWith 定义）。可以设置任何选项和事件（除了上面定义的ondrop事件）详细信息参考： jQuery UI droppable	{ activeClass : “ui-state-active”, hoverClass : “ui-state-hover” }
drag_opts	object	定义目标表格的选项配置（执行此方法的对象）。可以设置任何选项和事件（除了上面定义的onstart 和 onstop事件）。详细信息参考： jQuery UI draggable	{ revert: “invalid”, helper: “clone”, cursor: “move”, appendTo : ”#jqgrid_dnd”, zIndex: 5000 }
dropbyname	boolean	设置为true，只有和字段名称一致的字段才会添加到目标表格。使用addRowData 插入数据行，如果源表格有隐藏的a字段，那么在目标表格会显示出来。默认值为false，表示添加到目标表格的数据从源表格第一列算起（The default value of false mean that the grid data will be added to the target counted from the first column from source）	false
droppos	string	添加新添加行的位置。 first ：添加到目标表格的第一行 last ：添加到目标表格的最后一行	first
autoid	mixed	决定新数据行id如何生成。设置为true，新id使用添加autoidprefix配置的值作为前缀+一个随机数。设置为false，新id可以为下一记录数或者值（取决于colModel中配置的key选项）。设置为函数，需要返回一个值作为目标表格新数据行id。函数参数为插入到目标表格的键值对数据对象。	true
autoidprefix	string	autoid设置为true有效，指定新生成的id的前缀	dnd_
dragcopy	boolean	拷贝源数据行，而不是移动它（从源表格删除，仅GridDnD）	false

使用的 jQuery UI 部件和其他插件

jQuery UI core
jQuery UI draggable widget.
jQuery UI droppable widget.

存在的问题

在 Safari 金额Chrome下由于draggable widget的bug表现不是很好。效果表现为输入的文本会显示在拖拽的行下面（ The effect is that the entry text is selected bellow the draggable row）

示例

下面的示例中创建了3个表格 grid1, grid2 and grid3。grid1的数据行可以拖放到grid2和grid3，grid2的行只能拖放到grid1。

// Creating grid1
jQuery("#grid1").jqGrid({
    datatype: "local",
    height: 100,
    colNames: ['Id1', 'Name1', 'Values1'],
    colModel: [
       {name: 'id1', index: 'id',width: 100}, 
       {name: 'name1',index: 'name',width: 100},
       {name: 'values1',index: 'values',width: 200}
    ],
    caption: 'Grid 1',
    pager: '#pgrid1'
});
 
//Creating grid2
jQuery("#grid2").jqGrid({
    datatype: "local",
    height: 100,
    colNames: ['Id2', 'Name2', 'Values2'],
    colModel: [
       {name: 'id2',index: 'id',width: 100},
       {name: 'name2',index: 'name',width: 100},
       {name: 'values2',index: 'values',width: 200}
    }],
    caption: 'Grid 2',
    pager: '#pgrid2'
});
// Creating grid3
jQuery("#grid3").jqGrid({
    datatype: "local",
    height: 'auto',
    colNames: ['Id3', 'Name3', 'Values3'],
    colModel: [
       {name: 'id3',index: 'id',width: 100},
       {name: 'name3',index: 'name', width: 100},
       {name: 'values3',index: 'values',width: 200}
    }],
    caption: 'Grid 3',
    pager: '#pgrid3'
});
 
// Data for grid1
var mydata1 = [
    {id1:"1",name1:"test1",values1:'One'},
    {id1:"2",name1:"test2",values1:'Two'},
    {id1:"3",name1:"test3",values1:'Three'}
];
// Data for grid2
var mydata2 = [
    {id2:"11",name2:"test11",values2:'One1'},
    {id2:"21",name2:"test21",values2:'Two1'},
    {id2:"31",name2:"test31",values2:'Three1'}
];
// Data for grid3
var mydata3 = [
    {id3:"12",name3:"test12",values3:'One2'},
    {id3:"22",name3:"test22",values3:'Two2'},
    {id3:"32",name3:"test32",values3:'Three2'}
];
// Adding grid data
for (var i = 0; i <= mydata1.length; i++) {
    jQuery("#grid1").jqGrid('addRowData',i + 1, mydata1[i]);
    jQuery("#grid2").jqGrid('addRowData',i + 1, mydata2[i]);
    jQuery("#grid3").jqGrid('addRowData',i + 1, mydata3[i]);
}
// connect grid1 with grid2 and grid3
jQuery("#grid1").jqGrid('gridDnD',{connectWith:'#grid2,#grid3'});
// connect grid2 with grid1
jQuery("#grid2").jqGrid('gridDnD',{connectWith:'#grid1'});

来源：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods

加支付宝好友偷能量挖...

原创文章，转载请注明出处：jqGrid如何使用jQuery UI

2013-7-16评论(0)Web开发网

阅读(1387)喜欢(1)分类：jqGrid中文API