当前位置：文档库 › jqgrid表头合并和行合并,基于jquery脚本插件

jqgrid表头合并和行合并,基于jquery脚本插件

* jQuery tui tablespan plugin 0.2

* Dual licensed under the MIT and GPL licenses:

* https://www.wendangku.net/doc/2516551656.html,/licenses/mit-license.php

* https://www.wendangku.net/doc/2516551656.html,/licenses/gpl.html

* Create: 2010-09-16 10:34:51 yewf $

* Revision: $Id: tui.tablespan.js 2010-09-21 10:08:36 yewf $

* Table rows or cols span

/* 行合并。索引从0开始，包含隐藏列，注意jqgrid的自动序号列也是一列。

使用方法：

$("#jqGridId").tuiTableRowSpan("3, 4, 8");

jQuery.fn.tuiTableRowSpan = function(colIndexs) {

return this.each(function() {

var indexs = eval("([" + colIndexs + "])");

for (var i = 0; i < indexs.length; i++) {

var colIdx = indexs[i];

var that;

$('tbody tr', this).each(function(row) {

$('td:eq(' + colIdx + ')', this).filter(':visible').each(function(col) {

if (that != null && $(this).html() == $(that).html()) {

rowspan = $(that).attr("rowSpan");

if (rowspan == undefined) {

$(that).attr("rowSpan", 1);

rowspan = $(that).attr("rowSpan");

}

rowspan = Number(rowspan) + 1;

$(that).attr("rowSpan", rowspan); // do your action for the colSpan cell here

$(this).remove(); // .hide(); // do your action for the old cell here

} else {

that = this;

}

// that = (that == null) ? this : that; // set the that if not already set

});

}

});

/* 列表头合并。

索引从0开始，包含隐藏列，注意jqgrid的自动序号列也是一列。

使用方法：

$("#jqGridId").tuiJqgridColSpan({

cols: [

{ indexes: "3, 4", title: "合并后的大标题" },

{ indexes: "6, 7", title: "合并后的大标题" },

{ indexes: "11, 12, 13", title: "合并后的大标题" }

]

});

注意事项：

1.没有被合并的rowSpan=2，即两行。列的拖拉有BUG，不能和jqgrid的显示层位置同步；

2.jqgrid的table表头必须有aria-labelledby='gbox_tableid' 这样的属性；

3.只适用于jqgrid；

var tuiJqgridColSpanInit_kkccddqq = false;

jQuery.fn.tuiJqgridColSpan = function(options) {

options = $.extend({}, { cols: null }, options);

if (tuiJqgridColSpanInit_kkccddqq) {

return;

}

// 验证参数

if (options.cols == null || options.cols.length == 0) {

alert("cols参数必须设置");

return;

}

// 传入的列参数必须是顺序列，由小到大排列，如3,4,5

var error = false;

for (var i = 0; i < options.cols.length; i++) {

var colIndexs = eval("([" + options.cols[i].indexes + "])");

for (var j = 0; j < colIndexs.length; j++) {

if (j == colIndexs.length - 1) break;

if (colIndexs[j] != colIndexs[j + 1] - 1) {

error = true;

break;

}

if (error) break;

}

if (error) {

alert("传入的列参数必须是顺序列，如：3,4,5");

return;

// 下面是对jqgrid的表头进行改造

var resizing = false,

currentMoveObj, startX = 0;

var tableId = $(this).attr("id");

// thead

var jqHead = $("table[aria-labelledby='gbox_" + tableId + "']");

var jqDiv = $("div#gbox_" + tableId);

var oldTr = $("thead tr", jqHead);

var oldThs = $("thead tr:first th", jqHead);

// 在原来的th上下分别增加一行，下面这行克隆，上面这行增加且height=0

var ftr = $("").css("height", "auto").addClass("ui-jqgrid-labels").attr("role", "rowheader").insertBefore(oldTr);

var ntr = $("").addClass("ui-jqgrid-labels").attr("role", "rowheader").insertAfter(oldTr);

oldThs.each(function(index) {

var cth = $(this);

var cH = cth.css("height"), cW = cth.css("width"),

nth = $("").css("height", cH),

fth = $("").css("height", 0);

// 在IE8或firefox下面，会出现多一条边线，因此要去掉。

if (($.browser.msie && $.browser.version == "8.0") || $.browser.mozilla) {

fth.css({ "border-top": "solid 0px #fff", "border-bottom": "solid 0px #fff" });

}

if (cth.css("display") == "none") {

nth.css({ "display": "none", "white-space": "nowrap", "width": 0 });

fth.css({ "display": "none", "white-space": "nowrap", "width": 0 });

}

else {

nth.css("width", cW);

fth.css("width", cW);

// 这里增加一个事件，解决列的拖动

var res = cth.children("span.ui-jqgrid-resize");

res && res.bind("mousedown", function(e) {

currentMoveObj = $(this);

startX = getEventPos(e).x;

resizing = true;

document.onselectstart = new Function("return false");

});

}

// 增加第一行

fth.addClass(cth.attr("class")).attr("role", "columnheader").appendTo(ftr);

// 增加第三行

cth.children().clone().appendTo(nth);

nth.addClass(cth.attr("class")).attr("role", "columnheader").appendTo(ntr);

// 列合并。注意：这里不放在上面的循环中处理，因为每个遍历都要执行下面的操作。for (var i = 0; i < options.cols.length; i++) {

var colIndexs = eval("([" + options.cols[i].indexes + "])");

var colTitle = options.cols[i].title;

var isrowSpan = false;

for (var j = 0; j < colIndexs.length; j++) {

oldThs.eq(colIndexs[j]).attr({ "colSpan": colIndexs.length, "rowSpan": "1" });

// 把被合并的列隐藏，不能remove，这样jqgrid的排序功能会错位。

if (j != 0) {

oldThs.eq(colIndexs[j]).attr("colSpan", "1").hide();

}

// 标记删除clone后多余的th

$("thead tr:last th", jqHead).eq(colIndexs[j]).attr("tuidel", "false");

// 增加列标题

if (j == 0) {

var div = oldThs.eq(colIndexs[j]).find("div.ui-jqgrid-sortable");

var divCld = div.children();

div.text(colTitle);

div.append(divCld);

}

// 移除多余列

$("thead tr:last th[tuidel!='false']", jqHead).remove();

// 对不需要合并的列增加rowSpan属性

oldThs.each(function() {

if ($(this).attr("colSpan") == 1) {

$(this).attr("rowSpan", 2);

}

});

var jqBody = $(this);

// 绑定拖动事件

$(document).bind("mouseup", function(e) {

var ret = true;

if (resizing) {

var parentTh = currentMoveObj.parent();

var currentIndex = parentTh.parents("tr").find("th").index(parentTh);

var width, diff;

var tbodyTd = $("tbody tr td", jqBody);

var currentTh = $("thead tr:first th", jqHead).eq(currentIndex);

// 先使用td的宽度，如果td不存在，则使用事件宽度

if (tbodyTd.length > 0) {

diff = 0;

width = parseInt(tbodyTd.eq(currentIndex).css("width"));

}

else {

diff = getEventPos(e).x - startX;

width = parseInt(currentTh.css("width"));

}

var lastWidth = diff + width;

currentTh.css("width", lastWidth + "px");

resizing = false;

ret = false;

}

document.onselectstart = new Function("return true");

return ret;

});

// 设置为已初始化

tuiJqgridColSpanInit_kkccddqq = true;

// 适应不同浏览器获取鼠标坐标

getEvent = function(evt) {

evt = window.event || evt;

if (!evt) {

var fun = getEvent.caller;

while (fun != null) {

evt = fun.arguments[0];

if (evt && evt.constructor == Event)

break;

fun = fun.caller;

}

return evt;

}

getAbsPos = function(pTarget) {

var x_ = y_ = 0;

if (pTarget.style.position != "absolute") {

while (pTarget.offsetParent) {

x_ += pTarget.offsetLeft;

y_ += pTarget.offsetTop;

pTarget = pTarget.offsetParent;

}

x_ += pTarget.offsetLeft;

y_ += pTarget.offsetTop;

return { x: x_, y: y_ };

}

getEventPos = function(evt) {

var _x, _y;

evt = getEvent(evt);

if (evt.pageX || evt.pageY) {

_x = evt.pageX;

_y = evt.pageY;

} else if (evt.clientX || evt.clientY) {

_x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);

_y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);

} else {

return getAbsPos(evt.target);

}

return { x: _x, y: _y };

}

};

jQuery打印插件PrintArea实现jQuery打印插件PrintArea实现

实现javascript打印功能，打印整个页面就很简单，但如果指定打印某一个区域就有点难点，这里有一个jQuery插件PrintArea可实现打印页面某区域功能。使用说明需要使用jQuery库文件和PrintArea库文件使用方法一，包含文件部分 1. 2. 二，html部分 1.

打印

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.wendangku.net/doc/2516551656.html, web前端培训教程：jQuery插件库插件(Plugin)也成为jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。目前jQuery 插件已超过几千种，由来自世界各地的开发者共同编写、验证和完善。而对于jQuery 开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。一．插件概述插件是以jQuery 的核心代码为基础，编写出复合一定规范的应用程序。也就是说，插件也是jQuery 代码，通过js 文件引入的方式植入即可。插件的种类很多，主要大致可以分为：UI 类、表单及验证类、输入类、特效类、Ajax 类、滑动类、图形图像类、导航类、综合工具类、动画类等等。引入插件是需要一定步骤的，基本如下： 1.必须先引入jquery.js 文件，而且在所有插件之前引入； 2.引入插件；

https://www.wendangku.net/doc/2516551656.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吧。

细心的人：复制代码代码如下: Test Page jQuery是一个框架！压缩后有30多k吧。专心的人： [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 我们对比一下三者的UI效果：

JQUERY插件JQGRID常用属性说明

希望这个帮助文档能对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包，在首页属性里面添加如下包的信息注：由于加载js包会耗费大量资源，建议动态加载这些js包，优化页面初始化效率。 2、在页面上需要添加表格的地方，增加

list表格id，pager为表格导航条id

Jquery插件的使用--AutoComplete

Jquery插件的使用--AutoComplete Jquery插件是很不错的一种客户体验，今天就来讲讲我使用的AutoComplete插件，首先需要做一些准备工作：这3个文件还是少不了的（可以到Jquery官网去下载）一、直接使用构造的json数据来实现然后当然是写js代码了，首先来个稍微简单点的，最后的一个列子讲解如何从数据库中提取数据来实现这个效果（实际上都差不多）