/** * 封装表格插件条件:只需传入数据源与列表名、信息。 * @param {Object} * mydatalist:例如{url:'',data:postData,success:function(){}} * @return */ function dataGrid(options) { var width_table = $(".main_container_content").width() - 6; if (($(window).height() - 254) < 240) { height = ($(window).height() - 254); } else { height = 240; } $(".jqGrid div").remove(); var gridId = options.id ? options.id : 'list'; var pagerId = gridId + "_pager"; $(".jqGrid").append("<table id='" + gridId + "'></table>"); $(".jqGrid").append("<div id='" + pagerId + "'></div>"); var isLoaded = false; var realOptions = { mtype : "POST", datatype : "json", height : height,// height: 'auto', width : width_table, pager : "#" + pagerId, pgbuttons: true, pginput:true, loadonce:true, prmNames:{rows:"rows",page:"page"}, toolbar : [ true, "top" ], multiselect : true, rowNum : 20, rowList : [ 10, 20 ,50], rownumbers : true, jsonReader: { root:"data", page: "page", total: "total", records: "record", repeatitems : false } }; $.extend(realOptions, options); if(!realOptions['loadonce']){ $.extend(realOptions, { prmNames:{rows:"rows", page:"page", sort: "sortName", order: "sortOrder"}, viewrecords:true }); } var searchStartTime = (new Date()).getTime(); var searchEndTime = (new Date()).getTime(); var events = { loadError: function(xhr,st,err){ art.dialog.error(G_SYSTEM_ERROR); }, loadBeforeSend:function(xhr){ searchStartTime = (new Date()).getTime(); if(options.loadBeforeSend){ options.loadBeforeSend(); } }, beforeProcessing:function(xhr){ searchEndTime = (new Date()).getTime(); if(options.beforeProcessing){ options.beforeProcessing(); } }, loadComplete:function(){ if(realOptions.pager){ var searchTime = (searchEndTime - searchStartTime) / 1000; var renderTime = ((new Date()).getTime() - searchEndTime) / 1000; var pagerTextCtrl = $($('#' + pagerId).find(".ui-paging-info")[0]); pagerTextCtrl.html("查询时间 " + searchTime + "s 加载时间 " + renderTime + "s " + pagerTextCtrl.text()); } if(options.loadComplete){ options.loadComplete(); } }, gridComplete : function() { var ids = jQuery("#" + gridId).jqGrid('getDataIDs'); // for ( var i = 0; i < ids.length; i++) { // 用来标识奇偶行,和鼠标经过的事件 $("#" + gridId +" tr:odd").css({ "background" : "#D4E9EE" }); $("#" + gridId +" tr:even").css({ "background" : "#F5FAFB" }); $("#" + gridId +" tr").not(".ui-subgrid").hover(function() { $(this).children("td").addClass("ui-state-hover"); }, function() { $(this).children("td").removeClass("ui-state-hover"); }); // } if(options.gridComplete){ options.gridComplete(); } } }; /* * subgrid */ if (realOptions['subGridOption']) { var subgOp = { subGrid : true, repeatitems : false, subGridRowExpanded : function(subGridId, rowId) { var subGridloadOp = { subGridId : subGridId, rowId : rowId, width : width_table - 70, height : realOptions.subGridOption.subHeight ? realOptions.subGridOption.subHeight : 200, url : realOptions.subGridOption.subUrl, colNames : realOptions.subGridOption.subColNames, colModel : realOptions.subGridOption.subColModel, subPager : realOptions.subGridOption.subPager }; $.extend(subGridloadOp, realOptions.subGridOption); subGridload(subGridloadOp); }, subGridRowColapsed: function(subGridId, rowId) { jQuery("#"+subGridId+"_table").remove(); }, subGridOptions : { plusicon : "ui-icon-plus", minusicon : "ui-icon-minus", openicon : "ui-icon-carat-1-sw", expandOnLoad : false, selectOnExpand : true, reloadOnExpand : true } }; $.extend(subgOp, realOptions.subGridOption); $.extend(realOptions, subgOp); // 双击打开subgrid $.extend(events, { ondblClickRow:function (rowId){ $("#" + gridId).jqGrid('toggleSubGridRow', rowId); } }); } /* * end */ $.extend(realOptions, events); return jQuery("#" + gridId).jqGrid(realOptions); }
/** * 子表格 */ function subGridload(options) { var subGridId = options.subGridId; var subgrid_table_id = options.subGridId + "_table"; var subgrid_pager_id = options.subGridId + "_pager" $("#" + subGridId).css({ 'padding':'2px' }); $("#" + subGridId).height(options.height+30); $("#" + subGridId).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>"); var _subpagerId = null; var _rowNum = 9999; if (options.subPager) { $("#" + subGridId).height(options.height+61); _subpagerId = options.subPager ? "#"+subgrid_pager_id : null; _rowNum = 10; } var realOptions = { mtype : "POST", datatype : "json", height : options.height, pager : _subpagerId, loadonce : false, toolbar : [ false, "top" ], multiselect : false, shrinkToFit:true, rowNum : _rowNum, rowList : [ 10, 15 ,20], rownumbers : true, jsonReader : { root : "data", page : "page", total : "total", records : "record", repeatitems : false } }; $.extend(realOptions, options); if(!realOptions['loadonce']){ // 每次都从服务器加载时,分页参数 $.extend(realOptions, { prmNames:{rows:"rows", page:"page", sort: "sortName", order: "sortOrder"}, viewrecords:true }); } var events = { gridComplete : function() { // $("#" + subgrid_table_id+" tr:odd").css( { // "background" : "#F0F0F0" // }); // $("#" + subgrid_table_id+" tr:even").css( { // "background" : "#E0E0E0" // }); }, onSelectRow:function (a){ $(this).css({"background" : "#F5FAFB"}); } }; $.extend(realOptions, events); return jQuery("#" + subgrid_table_id).jqGrid(realOptions); }
调用sample:
subGridOption : { subPager: false, shrinkToFit:false, subHeight : 200, subUrl:'detailSearch.action?invoiceDetailEntity.invoiceNoticeId=' + $('#invoiceNoticeId').val(), subColNames:['工厂代码', '工厂名称', '仓库代码', '仓库名称'], subColModel:[{name:'polineNo', index:'PO_LINE_NO', width:80, editable:true, align:"center"}, {name:'factoryDesc', index:'FACTORY_DESC', width:80, editable:true, align:"center"}, {name:'invLocCode', index:'INV_LOC_CODE', width:80, editable:true, align:"center"}, {name:'invLocDesc', index:'INV_LOC_DESC', width:80, editable:true, align:"center"}] },
相关推荐
在"jqGrid插件源码"中,我们可以深入理解其内部工作机制,学习如何自定义功能或优化性能。源码分为以下几个关键部分: 1. **src**:这是jqGrid的主要源代码目录,包含了核心功能的JavaScript文件。在这里,你可以...
本篇文章将深入探讨C#封装的JqGrid插件,以及如何在实际项目中配置和应用它。 首先,JqGrid插件的核心在于其丰富的功能特性,如分页、排序、搜索、过滤、编辑和添加数据等。通过C#进行封装,可以方便地与后端服务器...
jqGrid是一款基于jQuery的开源表格插件,专为数据管理和展示设计,提供了丰富的功能和高度的自定义性。它在Web开发中广泛应用于构建高效、交互式的数据网格。以下是关于jqGrid的一些关键知识点: 1. **基本使用**:...
JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。...通过深入学习和实践"JqGrid插件+JqGridDemo+JqGrid主题",开发者可以提升其在前端开发中的数据处理能力,创建出更富交互性的网页应用。
JqGrid是一款强大的JavaScript插件,专为网页端的数据展示和操作设计,尤其适用于处理大量表格数据。它基于jQuery库,提供了丰富的功能,包括数据排序、查询、分页、编辑以及自定义列显示等,极大地提高了开发效率和...
jqGrid是一款基于jQuery的表格插件,用于创建功能丰富的数据网格。它提供了强大的数据操作、分页、排序、过滤和编辑功能,使得在Web应用中展示和管理数据变得极其便捷。在JavaScript和HTML5的世界里,jqGrid是开发...
jqGrid是一款功能强大的JavaScript表格插件,主要用于在Web页面中展示和操作数据,它提供了丰富的交互性和自定义功能。这款插件基于jQuery库,因此在兼容性和易用性上具有显著优势。jqGrid的主要特点包括分页、排序...
以下是对jqGrid插件在ASP.NET中的应用进行的详细说明: 1. **数据绑定**:jqGrid支持多种数据源,包括Web服务、JSON、XML、CSV等。在ASP.NET中,你可以通过ADO.NET、Entity Framework或LINQ to SQL等方式获取数据,...
### jqGrid插件知识点详解 #### 一、概述 jqGrid 是一款基于 jQuery 的表格插件,具有强大的功能,能够实现复杂的数据展示和操作。它不仅支持数据的排序、分页、过滤等基本功能,还提供了自定义列、行编辑等功能,...
jqGrid是一款功能强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它支持多种功能,如数据分页、排序、过滤、编辑和 AJAX 交互。这款插件基于 jQuery 库,使得开发者能够轻松地在网页上创建交互式、...
以下是对jqGrid插件的一些关键知识点的详细说明: 1. **安装与引入**: 在开始使用jqGrid前,你需要下载jqGrid的库文件,包括JavaScript文件(如`grid.base.js`, `grid.common.js`等)和CSS文件。这些文件可以从...
jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作表格化的数据。在开始使用 jqGrid 之前,需要具备基本的 JavaScript 和 jQuery 知识,因为 jqGrid 是构建在 jQuery 库之上的。jQuery 提供了简便的...
jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作大量结构化数据。这个"jqGrid demo (完整版)"提供了一个全面的示例,可以帮助开发者更好地理解和应用 jqGrid,无论是在 PHP 或 JSP 环境中。 1....
jQGrid 是一个基于 jQuery 的开源数据网格插件,它提供了强大的数据管理功能,包括数据的分页、排序、过滤、编辑等。在本"jQgrid demo"中,我们将深入探讨如何利用 jQGrid 实现交互式的数据展示和操作。 jQGrid 的...
**LaravelJqGrid** 是一个专为 Laravel 框架设计的插件,它允许开发者集成 JqGrid JavaScript 库来创建动态、交互式的表格数据展示和管理界面。JqGrid 是一个强大的 jQuery 插件,提供了丰富的功能,如分页、排序、...
五、jqGrid插件 jqGrid的`plugins`目录包含了多个增强功能的插件,例如: 1. `grid.locale-cn.js`:中文语言包,用于本地化提示信息。 2. `jqGrid.import.js`:支持数据导入功能。 3. `grid.columntype.js`:定义...
plugins 文件夹则是 jqGrid 插件的集合,这些插件扩展了 jqGrid 的功能,如分页、排序、搜索和编辑等。例如,"subgrid" 插件允许在一个单元格内嵌套另一个表格,"navigator" 插件则提供了包括新增、编辑、删除、查看...
jQGrid 是一个基于 jQuery 的开源插件,主要用于创建交互式网格控件。 jQGrid 提供了强大的数据展示和编辑功能,支持多种数据源,包括数组、XML 和 JSON 数据。 在开始使用 jQGrid 之前,需要具备基本的 JavaScript...
11. **插件与扩展**:了解如何使用和创建jqGrid插件,以实现更复杂的功能,比如导出数据、导入数据、拖放列等。 12. **性能优化**:在处理大量数据时,了解如何配置jqGrid以提高加载速度和响应性能。 通过深入学习...
jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作大量结构化数据。版本 3.4.4 被标记为稳定版,意味着它经过了广泛的测试和验证,适合在生产环境中使用,能提供可靠的数据管理功能。 1. **jQuery ...