文档视界
文档视界 最新最全的文档下载
当前位置：文档视界 › jquery插件方法

jquery插件方法

jquery插件方法
jquery插件方法

主要对detailview jquerydatagrid插件做扩展源码修改

var detailview = $.extend({}, $.fn.datagrid.defaults.view, {

beforeField:"",

afterField:function(field){

detailview['beforeField'] = field;

},

addExpandColumn: function(target, index){

var opts = $.data(target, 'datagrid').options;

if (index >= 0){

_add(index);

} else {

var length = $(target).datagrid('getRows').length;

for(var i=0; i

_add(i);

}

}

function _add(rowIndex){

var tr = opts.finder.getTr(target, rowIndex, 'body', 1);

if(detailview['beforeField'] != ""){

if(tr.children('td[field='+detailview['beforeField']+']').length == 0)

tr = opts.finder.getTr(target, rowIndex, 'body', 2);

}

if (tr.find('span.datagrid-row-expander').length){return;} // the expander is already exists

var cc = [];

cc.push('');

cc.push('

');

cc.push('');

cc.push('

');

cc.push('');

if (tr.is(':empty')){

tr.html(cc.join(''));

}

else if(detailview['beforeField'] != ""){

$(cc.join('')).insertAfter(tr.children('td[field='+detailview['beforeField']+']'));

}

else if (tr.children('td.datagrid-td-rownumber').length){

$(cc.join('')).insertAfter(tr.children('td.datagrid-td-rownumber'));

} else {

$(cc.join('')).insertBefore(tr.children('td:first'));

}

$(target).datagrid('fixRowHeight', rowIndex);

tr.find('span.datagrid-row-expander').unbind('.datagrid').bind('click.datagrid', function(e){

var rowIndex = $(this).closest('tr').attr('datagrid-row-index');

if ($(this).hasClass('datagrid-row-expand')){

$(target).datagrid('expandRow', rowIndex);

} else {

$(target).datagrid('collapseRow', rowIndex);

}

$(target).datagrid('fixRowHeight');

return false;

});

}

},

render: function(target, container, frozen){

var state = $.data(target, 'datagrid');

var opts = state.options;

var rows = state.data.rows;

var fields = $(target).datagrid('getColumnFields', frozen);

var table = [];

for(var i=0; i

table.push('

');

// get the class and style attributes for this row

var cls = (i % 2 && opts.striped) ? 'class="datagrid-row datagrid-row-alt"' : 'class="datagrid-row"';

var styleValue = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : '';

var style = styleValue ? 'style="' + styleValue + '"' : '';

var rowId = state.rowIdPrefix + '-' + (frozen?1:2) + '-' + i;

table.push('

');

table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));

table.push('

');

table.push('

');

if (frozen){

table.push('

');

table.push('

');

table.push('

');

} else {

table.push('

');

}

table.push('

');

if (frozen){

table.push(' ');

} else {

table.push(opts.detailFormatter.call(target, i, rows[i]));

}

table.push('

');

table.push('

');

}

$(container).html(table.join(''));

},

insertRow: function(target, index, row){

var opts = $.data(target, 'datagrid').options;

var dc = $.data(target, 'datagrid').dc;

var panel = $(target).datagrid('getPanel');

var view1 = dc.view1;

var view2 = dc.view2;

var isAppend = false;

var rowLength = $(target).datagrid('getRows').length;

if (rowLength == 0){

$(target).datagrid('loadData',{total:1,rows:[row]});

return;

}

if (index == undefined || index == null || index >= rowLength) { index = rowLength;

isAppend = true;

this.canUpdateDetail = false;

}

$.fn.datagrid.defaults.view.insertRow.call(this, target, index, row);

_insert(true);

_insert(false);

this.addExpandColumn(target, index);

this.canUpdateDetail = true;

function _insert(frozen){

var v = frozen ? view1 : view2;

var tr = v.find('tr[datagrid-row-index='+index+']');

var table = tr.parents('table:first');

var newTable = $('

');

if (isAppend){

newTable.insertAfter(table);

var newDetail = tr.next().clone();

} else {

newTable.insertBefore(table);

var newDetail = tr.next().next().clone();

}

tr.appendTo(newTable.children('tbody'));

newDetail.insertAfter(tr);

newDetail.hide();

if (!frozen){

newDetail.find('div.datagrid-row-detail').html(opts.detailFormatter.call(target, index, row));

}

}

},

deleteRow: function(target, index){

var opts = $.data(target, 'datagrid').options;

var dc = $.data(target, 'datagrid').dc;

var tr = opts.finder.getTr(target, index);

tr.parent().parent().remove();

$.fn.datagrid.defaults.view.deleteRow.call(this, target, index);

dc.body2.triggerHandler('scroll');

},

updateRow: function(target, rowIndex, row){

var dc = $.data(target, 'datagrid').dc;

var opts = $.data(target, 'datagrid').options;

var cls = $(target).datagrid('getExpander', rowIndex).attr('class');

$.fn.datagrid.defaults.view.updateRow.call(this, target, rowIndex, row);

this.addExpandColumn.call(this, target, rowIndex);

$(target).datagrid('getExpander', rowIndex).attr('class',cls);

// update the detail content

if (this.canUpdateDetail){

var row = $(target).datagrid('getRows')[rowIndex];

var detail = $(target).datagrid('getRowDetail', rowIndex);

detail.html(opts.detailFormatter.call(target, rowIndex, row));

}

},

onBeforeRender: function(target){

var opts = $.data(target, 'datagrid').options;

var dc = $.data(target, 'datagrid').dc;

var panel = $(target).datagrid('getPanel');

var t;

if(detailview['beforeField'] != ''){

t = dc.view2.children('div.datagrid-header').find('table');

if(t.find('td[field='+detailview['beforeField']+']').length == 0){

t = dc.view1.children('div.datagrid-header').find('table');

}

}else{

t = dc.view2.children('div.datagrid-header').find('table');

}

if (t.find('div.datagrid-header-expander').length){

return;

}

var td = $('

');

if ($('tr',t).length == 0){

td.wrap('').parent().appendTo($('tbody',t));

}

else if(detailview['beforeField'] != ''){

td.insertAfter(t.find('td[field='+detailview['beforeField']+']'));

}

else if (opts.rownumbers){

td.insertAfter(t.find('td:has(div.datagrid-header-rownumber)'));

} else {

td.prependTo(t.find('tr:first'));

}

},

onAfterRender: function(target){

var state = $.data(target, 'datagrid');

var dc = state.dc;

var opts = state.options;

var panel = $(target).datagrid('getPanel');

$.fn.datagrid.defaults.view.onAfterRender.call(this, target);

if (!state.onResizeColumn){

state.onResizeColumn = opts.onResizeColumn;

}

if (!state.onResize){

state.onResize = opts.onResize;

}

function setBodyTableWidth(){

var columnWidths = dc.view2.children('div.datagrid-header').find('table').width();

dc.body2.children('table').width(columnWidths);

}

opts.onResizeColumn = function(field, width){

setBodyTableWidth();

var rowCount = $(target).datagrid('getRows').length;

for(var i=0; i

$(target).datagrid('fixDetailRowHeight', i);

}

// call the old event code

state.onResizeColumn.call(target, field, width);

};

opts.onResize = function(width, height){

setBodyTableWidth();

state.onResize.call(panel, width, height);

};

this.addExpandColumn(target);

this.canUpdateDetail = true; // define if to update the detail content when 'updateRow' method is called;

dc.footer1.find('span.datagrid-row-expander').css('visibility', 'hidden');

$(target).datagrid('resize');

}

});

$.extend($.fn.datagrid.methods, {

fixDetailRowHeight: function(jq, index){

return jq.each(function(){

var opts = $.data(this, 'datagrid').options;

var dc = $.data(this, 'datagrid').dc;

var tr1 = opts.finder.getTr(this, index, 'body', 1).next();

var tr2 = opts.finder.getTr(this, index, 'body', 2).next();

// fix the detail row height

if (tr2.is(':visible')){

tr1.css('height', '');

tr2.css('height', '');

var height = Math.max(tr1.height(), tr2.height());

tr1.css('height', height);

tr2.css('height', height);

}

dc.body2.triggerHandler('scroll');

});

},

getExpander: function(jq, index){ // get row expander object

var opts = $.data(jq[0], 'datagrid').options;

// if(beforeField != ''){

// return opts.finder.getTr(jq[0], index, 'body', 2).find('span.datagrid-row-expander'); // }else{

// return opts.finder.getTr(jq[0], index, 'body', 1).find('span.datagrid-row-expander'); // }

if(opts.finder.getTr(jq[0], index, 'body', 1).find('span.datagrid-row-expander').length > 0){

return opts.finder.getTr(jq[0], index, 'body', 1).find('span.datagrid-row-expander');

}else{

return opts.finder.getTr(jq[0], index, 'body', 2).find('span.datagrid-row-expander');

}

},

// get row detail container

getRowDetail: function(jq, index){

var opts = $.data(jq[0], 'datagrid').options;

var tr = opts.finder.getTr(jq[0], index, 'body', 2);

return tr.next().find('div.datagrid-row-detail');

},

expandRow: function(jq, index){

return jq.each(function(){

var opts = $(this).datagrid('options');

var dc = $.data(this, 'datagrid').dc;

var expander = $(this).datagrid('getExpander', index);

if (expander.hasClass('datagrid-row-expand')){

expander.removeClass('datagrid-row-expand').addClass('datagrid-row-collapse');

var tr1 = opts.finder.getTr(this, index, 'body', 1).next();

var tr2 = opts.finder.getTr(this, index, 'body', 2).next();

tr1.show();

tr2.show();

$(this).datagrid('fixDetailRowHeight', index);

if (opts.onExpandRow){

var row = $(this).datagrid('getRows')[index];

opts.onExpandRow.call(this, index, row);

}

}

});

},

collapseRow: function(jq, index){

return jq.each(function(){

var opts = $(this).datagrid('options');

var dc = $.data(this, 'datagrid').dc;

var expander = $(this).datagrid('getExpander', index);

if (expander.hasClass('datagrid-row-collapse')){

expander.removeClass('datagrid-row-collapse').addClass('datagrid-row-expand');

var tr1 = opts.finder.getTr(this, index, 'body', 1).next();

var tr2 = opts.finder.getTr(this, index, 'body', 2).next();

tr1.hide();

tr2.hide();

dc.body2.triggerHandler('scroll');

if (opts.onCollapseRow){

var row = $(this).datagrid('getRows')[index];

opts.onCollapseRow.call(this, index, row);

}

}

});

}

});

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

https://www.docsj.com/doc/e48160961.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代码了，首先来个稍微简单点的，最后的一个列子讲解如何从数据库中提取数据来实现这个效果（实际上都差不多）

侵权投诉  © 2013-2023 www.docsj.com  站点地图 | 手机版

闽ICP备11023808号-7  本站文档均来自互联网及网友上传分享，本站只负责收集和整理，有任何问题可通过上访投诉通道进行反馈