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
  1. 扩展多选select对象的部件类名称(msel is either the name of a ui widget class that extends a multiselect)
  2. 或者为一个函数用于创建多选select对象(没有参数,或者传递一个对象)
  3. 或者销毁它(设置为destroy)
multiselect
dlog mixed
  1. ui部件类名称
  2. 或者未一个函数,用于创建对话框(参数为dlog_opts)
  3. 或者销毁它(设置为destroy)
dialog
dlog_opts mixed
  1. 传递给dlog的参数对象
  2. 或者一个函数用于创建参数对象,

默认为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 添加新添加行的位置。
  1. first :添加到目标表格的第一行
  2. 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

评论(0)Web开发网
阅读(1201)喜欢(0)不喜欢(0)jqGrid中文API