JQuery的插件jqGrid使用说明 - 360文档中心
JQuery的插件jqGrid使用说明
一、Js包说明 (2)
二、功能描述: (2)
三、写jqGrid函数 (3)
四、增加、删除、修改操作的实现 (4)
五、jqGrid的修改编辑功能 (6)
六、xml数据格式的解释 (8)
七、一些操作函数 (9)
一、
Js包说明
jQuery 的jqGrid包现在已经更新到了4.0了,但是其中的主要应用是不会有太大的改动的,希望这个帮助文档能对jQuery插件的学习有所帮助。
jqGrid包说明:
jquery.js is the jQuery library,
jquery.jqGrid.js 主单元,包含的功能取决您的选择
grid.basic.js主插件其他插件包依赖于该插件正常运行
grid.custom.js Grid高级插件功能包
grid.formedit.js用于表格编辑、增加、删除功能
grid.inlinedit.js 线条编辑
grid.subgrid.js 一个处理表格的插件
grid.postext.js 一个可以用来操作post数据的包
jqModal.js 模态对话框的编辑
jqDnR.js 可拖拉的表格编辑
themes 包含gird需要的样式表
二、功能描述:
jqGrid包主要用于将需要展示的数据动态的展示在页面的上,即动态画出表格,并封装了增、删、改、查、分类显示、在线编辑修改等功能。
一、关键使用说明:
1、导入jqGrid包,在首页属性里面添加如下包的信息
href=\"/SedSoft/jqGrid/themes/basic/grid.css\">
href=\"/SedSoft/jqGrid/themes/jqModal.css\">
注:由于加载js包会耗费大量资源,建议动态加载这些js包,优化页面初始化效率。
2、在页面上需要添加表格的地方,增加
list表格id,pager为表格导航条id
三、写jqGrid函数
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: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'My first grid'
});
});
以上代码基本可以将要展示的表格展示出来了,现在对一些属性说明:
jQuery(“#list”).jqGrid list为将要显示表格的table 的id
altRows : 设置表格显示斑马条纹属性,默认值为true
caption: 定义表格标题名
cellEdit:设置表格单元是否可以编辑,默认值为true,详见cellEdit介绍
cellsubmit: 决定cell容器如何被保存,使用’remote’或者‘clientArray’,详见cellEdit cellurl: 处理cell编辑的url路径,默认值为空
datatype : 从后台展示的数据格式,有xml、json等
mtype:数据传递的方式,有get 和post两种
editurl: 定义inline和form 编辑的后台处理url
Expandcolumn: 在定义treeGrid情况下,指明那一列用来伸展树
forceFit:设置表格在被拖动时自动调整大小以不破坏表格整体布局,注:该属性和shrinkToFit不能同时使用
gridstate: 设置通用表格在使用hiddengrid属性时,hidegrid的值,可以是:’visible’
或’hidden’默认为visible
shrinkToFit
loadonce: 如果该值设置为true则表格数据仅加载一次,在第一次请求之后数据信息自动转变为客户端处理,pager导航条上的函数都不可用。
loadtext:在请求数据时显示字幕,默认值为:Loading….
colNames:要显示数据表格的列名,需要在前台定义好表格列名
colMode:对要展示的每列值属性进行定义,最常用的有:
align: 定义表格对齐方式,默认值为left
datefmt:日期格式,默认值为:Y-M-d
editable:定义field是否可编辑,该属性用于inline和form编辑,默认值为false
editrules:editrules:{edithidden:true,//如果为true,则该列在添加和编辑时被隐藏
required:true,//如果为true,则该列表格不能为空
number:true,//true时表格必须为数字型
integer:true,//true时,表格数字为整形
minValue:val,//设置数字最小值与最大值
maxValue:val,
email:true}//验证是否为email
edittype:定义编辑类型:text,texttarea,select,checkbox,passworad
hidedlg: 为true时,该列不会显示在表格对话框中
hidden:定义列在初始化时是否被隐藏
index:定义索引名
name: 定义属性名,必填项
resizable: 定义列是否可调整大小
index: 定义列id
width:宽度
align:对齐方式
pager:导航条要展示的位置
rowNum:默认的每页显示记录数
rowList:可选的每页显示数
viewrecords:是否设置表格可选,为true是可选,但此时表格不可编辑,只有在false是才可以编辑
imgpath:图片路径
注:以上属性并不会全部同时出现在jqGrid表格设置里,jqGrid设计了灵活多变的不同组合来展示表格不同的功能。在以后的实际应用里,将对重点属性的组合和分配进行说明。
四、增加、删除、修改操作的实现
2)增加
jqGrid包自身封装了相当完善的操作事件,
jQuery("#list").navGrid('#pager',
{
refresh: true,
edit: true,
add: true,
del: true,
search: true ,
position:"right"})
将上面一段代码,添加到jqGrid({})后面,refresh等参数,均设置为true,则
导航条上即可显示出五个按钮,刷新、编辑、增加、查找等,position设置这些按钮在导航条上的位置。
editurl: pathname+'/xmlTableEdit?openagent&oper=edit', //设置添加、更新的url
这段代码是编辑、增加、查找等功能执行的代码,写在url后面方便查找。对于这些定义的功能,每个操作传递过去的editurl是不一样的,oper分别是edit ,add,search、等。之后传递的是操作后,数据变化的参数。
当然,我们很多时候需要自己定义一些事件,jqGrid有一个添加按钮的函数,可以方便的添加我们想要的任何功能按钮
jQuery("#list").navGrid('#pager',
{
refresh: true,
edit: true,
add: true,
del: true,
search: true ,
position:"right"}
).navButtonAdd(
'#pager',
{
caption:"Del",
buttonimg:"/SedSoft/jqGrid/themes/basic/images/folder.png",
onClickButton: function(){ //执行删除行操作
// var gr = jQuery("#list").getGridParam("selarrrow");
var gr=chooseid;
if( gr != null&gr!="" ) {
jQuery("#list").delGridRow(gr,{
afterSubmit: function(xhr,postdata){
alert ('After Submit: ' + postdata);
return [true]},
url: pathname +'/xmlTableEdit?openagent&oper=del' //执行删除代理rul
});
} else {
alert("Please Select Row to delete!");
};},position:"last"
})
上面这段代码就添加了一个删除按钮,并获得选中的id数组,并通过url代理去处理该操作。
事实上,通过.navButtonAdd()函数可以添加任何我们想要的按钮,而该函数里面属性分
别定义按钮出现的位置’#pager’,按钮标题字符’caption’,按钮图标路径’buttonimg’,点击按钮的onClickButton事件,在事件里面可以写任何你想要的js代码,以满足你的需求。position属性定义了按钮显示的位置。
除了这种直接添加按钮和事件的方法外,jqGrid还提供了重写和替换部分功能函数的能力。举例编辑功能说明。
五、jqGrid的修改编辑功能
jqGrid定义了三种可以用于修改和编辑表格数据的方法,分别是cellEdit、inline Edit、rowEdit
分别对应单元格编辑、在线行编辑、以对话框式的行编辑。以下将分别简单介绍这三种编辑方法和用法。
(一)cellEdit:
●单元格编辑支持键盘操作,当选中某一单元格时,可以按上下、左右来切
换选中
●如果单元格可编辑,当我们按下Enter键或鼠标点击其他键时cell编辑后将被
保存,除非我们按下Esc键
●当cell被编辑过后,cell编程’dirty’数据,这时候在左上角会显示出一个红色
标记
●当我们点击可编辑的cell时,我们可以直接进入编辑状态
properties:
1、有三个属性来设置cellEdit:
cellEdit:当为true时,cell才可编辑,此时Multiselect(设置选择多行)则不可用,onSelectRow函数不可用
cellsubmit:定义cell容器在那里被保存,’remote’或’clientArray’。如果是’remote’则数据会立刻通过cellUrl用Ajax方式传递到后台去处理,传递格式为:
{id:rowed,mycell:cellvalue}
cellurl: 设置cell编辑的url
注意:在collmodel里对列属性进行定义的editrules{}里,所有的设置对cellEdit、inline、rowEdit均适用。
2、cellEdit编辑的几种事件
afterEditCell(rowed,cellname,value,iRow,iCol)
afterSaveCell(rowed,cellname,value,iRow,iCol)
afterSubmitCell(serverresponse,rowed,cellname,value,iRow,iCol)
beforeEidtCell(rowed,cellname,value,iRow,iCol)
beforeSaveCell(rowed,cellname,value,iRow,iCol)
beforeSubmitCell(rowed,cellname,value,iRow,iCol)
errorCell(serverresponse,statur)
onSelectCell(rowed,celname,value,iRow,iCol)
这些事件在实际应用中拿出部分进行组合应用即可,其中onSelectCell只能应用于不可编辑的单元格
3、举例说明
cellurl: pathname+'/xmlSaleTableEdit?openagent&oper=edit', //定义编辑cellEdit rul和
editUrl不同,需要单独设置
cellEdit: true, //cell编辑时,此属性必须为true
afterEditCell: function(rowid,cellname,value,iRow,iCol){
var zk= jQuery("#list").getCell(rowid,"N_JinEr");//获取某一单元格的值
jQuery("#list").setCell(rowid,"N_JinEr",9000,{color:'red','text-align':'center'});
},
afterSubmitCell:function(serverrepsponse,rowid,cellname,value,iRow,iCol){
var text=serverrepsponse.responseText;
var arr = text.split(";");
if(arr[0].indexOf("true")!=-1){
var num = parseFloat(arr[1]);
jQuery("#list").setCell(rowid,"N_JinEr",num ,{color:'red','text-align':'center'});
}
},
以上代码展示了cellEdit设置需要的代码。cellEdit功能的实现只需要设置cellEdit为true,并设置cellurl在后台写处理数据的程序即可。而要满足功能上的需要,还需要添加afterEditCell等事件。
afterSubmitCell:提交完成后事件,serverrepsponse从后台返回数据,rowid选中行id,cellname 单元格name属性在colModel里设置,value cell的值,iRow index of the row,iCol the index of the column
jQuery("#list").setCell(rowid,"N_JinEr",num ,{color:'red','text-align':'center'}//设行id为rowid,列名为’N_JinEr’的单元格值为num,样式设置为{color:'red','text-align':'center'}。
afterSubmitCell处理了cellEdit编辑后,从后台取回数据并处理单元格值的过程,在实际情况下根据需要添加不同事件即可。
(二)inlineEdit:
editurl:pathname+'/xmlTableEdit?openagent&oper='+oper+'&showView='+showView+'&for mName='+formName+'&punid='+unid, //设置添加、更新的url /* //以下参数根据需要添加,/* oper: 操作类型,edit 编辑、del 删除、
showView: 操作视图名,即表格展示的试图
formName:操作标识符,区分不同表单的不同操作
punid: 主文档id
*/
ultiselect: false, //选择行属性inlineEdit时不能设置多选行
onSelectRow: function(id){
chooseid=id;
if(id && id!==lastsel2){
jQuery('#list').restoreRow(lastsel2); //选中不同表格id变化
jQuery('#list').editRow(id,true,oneditfunc,aftersavefunc); //表格编辑函数
lastsel2=id;
};
// 表格编辑时触发函数,一般无用可以为空
function oneditfunc(id){
};
//格编辑保存后执行函数,可以用来处理相关事件
function aftersavefunc(id,res){
jQuery("#list").trigger("reloadGrid");
changeValueafEdit(showView,unid);
};
},
// 重写编辑验证提示
jQuery.jgrid.edit = {
editCaption: "编辑记录",
bSubmit: "提交",
bCancel: "退出",
processData: "处理中...",
width:400,
dodal:true,
msg: {
required:"Field is required",
number:"请输入数字!",
minValue:"数值应大于",
maxValue:"数值应小于"
}
};
$.extend($.jgrid.edit,{Edit:'修改'});
六、xml数据格式的解释
XML Data
jqGrid解释数据的方式有三种:xml、json、xmlString,我们使用xml这种方式来处理。Xml的格式和作用,这里不做说明,有兴趣的可以自己到网上查。
xmlReader :
{ root: "rows",
row: "row",
page: "rows>page",
total: "rows>total",
records : "rows>records",
repeatitems: true,
cell: "cell",
id: "[id]",
userdata: "userdata",
subgrid: { root:"rows", row: "row", repeatitems: true, cell:"cell" }
}
上面一段代码,放在jqGrid里面,作为对后台传送xml数据格式的解释方式。标准的jqGrid 支持的xml格式如下所示:
-----root:rows
-----row:row
sss | ------cell:cell
sss |
sss |
sss |
sss |
sss |
sss |
|
sss |
sss |
sss |
sss |
sss |
sss |
sss |
如果xml格式发生变化,则xmlReader里的数据做相应修改即可。
page: "rows>page",
total: "rows>total",
records : "rows>records",
repeatitems: true,
这几行代码的作用在于,定义分页的条件,使页面正确显示数据和分页。最后一个repertitems是设置xml格式里的cell是否可以重复一样。
七、一些操作函数
jQuery("#grid_id").trigger("reloadGrid"); 刷新表格
jQuery("#grid_id").getGridParam('selarrrow'); 获取选择表格的id 多选的
jQuery("#grid_id").getGridParam('selrow'); 获取选中表格id 单选
//设置不可编辑的单元格被选中后触发的事件
onSelectCell:function(rowid,celname,value,iRow,iCol){
var gg= jQuery("#list").getGridParam("selrow");
var gr= jQuery("#list").getCell(gg,"N_DanJia");
if(gr<100){
N_DanJia:1000;
};
},
beforeSubmitCell : function(rowid,celname,value,iRow,iCol){
UserData:
在某些情况下,我们接受到从服务器端传递过来的数据并不会自动的被jqGrid展现的,这个时候我们要么在接下来对它进行处理,要么在html代码里进行额外说明,这个时候userdata这个标签就用到了。
xmlReader: {userdata: "userdata",... }
In the data received from the server, this could be structured as follows (in xml): true
240.00
40.00
...
|
data1 |
data2 |
data3 |
data4 |
data5 |
data6 |
...
57页开始讲解增删查改
12.3 更新:
jQuery打印插件PrintArea实现jQuery打印插件PrintArea实现 实现javascript打印功能,打印整个页面就很简单,但如果指定打印某一个区域就有点难点,这里有一个jQuery插件PrintArea可实现打印页面某区域功能。 使用说明 需要使用jQuery库文件和PrintArea库文件 使用方法 一,包含文件部分 1. 2. 二,html部分 1.
打印
2.
3......文本打印部分..... 4.
三,javascript部分 1.$("div#biuuu_button").click(function(){ 2.$("div#myPrintArea").printArea(); 3.}); jQuery插件PrintArea完整方法如下: 1.(function($) { 2.var printAreaCount = 0; 3.$.fn.printArea = function() 4.{ 5.var ele = $(this); 6.var idPrefix = "printArea_"; 7.removePrintArea( idPrefix + printAreaCount ); 8.printAreaCount++; 9.var iframeId = idPrefix + printAreaCount; 10.var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'; 11.iframe = document.createElement('IFRAME'); 12.$(iframe).attr({ style : iframeStyle, 13.id : iframeId 14.});
jQuery插件库 https://www.360docs.net/doc/d4675961.html, web前端培训教程:jQuery插件库 插件(Plugin)也成为jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序。目前jQuery 插件已超过几千种,由来自世界各地的开发者共同编写、验证和完善。而对于jQuery 开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本。 一.插件概述 插件是以jQuery 的核心代码为基础,编写出复合一定规范的应用程序。也就是说,插件也是jQuery 代码,通过js 文件引入的方式植入即可。 插件的种类很多,主要大致可以分为:UI 类、表单及验证类、输入类、特效类、Ajax 类、滑动类、图形图像类、导航类、综合工具类、动画类等等。 引入插件是需要一定步骤的,基本如下: 1.必须先引入jquery.js 文件,而且在所有插件之前引入; 2.引入插件;
https://www.360docs.net/doc/d4675961.html, 3.引入插件的周边,比如皮肤、中文包等。 二.验证插件 Validate.js 是jQuery 比较优秀的表单验证插件之一。这个插件有两个js 文件,一个是主文件,一个是中文包文件。使用的时候,可以使用min 版本;在这里,为了教学,我们未压缩版本。 验证插件包含的两个文件分别为:jquery.validate.js 和 jquery.validate.messages_zh.js。 //HTML 内容
//jQuery 代码 $(function () {
jQuery 插件开发详解 JavaScript jQuery 插件开发 jQuery 插件开发其实很简单 jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件 经常有人询问一些技巧,因此干脆写这么一篇文章给各位jQuery爱好者,算是抛砖引玉吧。 【基础】 a)样式 很多人会认为样式是个很复杂的东西,需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI,抛开图片设计不说,其实css也就是那么些属性:position,margin,paddi ng,width,height,left,top,float,border,background... UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。举个简单的例子,一个简单的页面,马虎的人: 复制代码代码如下:
Test Page jQuery是一个框架!压缩后有30多k吧。