JqGrid文档:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
JqGrid Demo:http://trirand.com/blog/jqgrid/jqgrid.html#t107
JqGrid的基础,我这里就不做介绍了,不知道的可以去看看博客园或Google,最好去看文档。先看效果图:
本Demo可以查询、修改、分组。新增、删除等一些基本功能都可以去JqGrid Demo中找到。
逻辑思路:第一次加载本年度的经营计划数据,加载完成后,将JqGrid设置成本地数据,这样分页、数据查询都成customs。只能修改本月以后的计划,在afterShowForm和afterclickPgButtons做验证,如果时间小于等于本月,这将提交按钮设置成disabled。否则提交按钮可以使用。在提交服务器前,需要将JqGrid的datatype设置成json,否则不会请求服务器。
本Demo只做了2010、2011、2012年三个静态数据源,修改数据只做了返回信息,并没修改数据源数据。
Apsx页面代码:
<table id="jqgridlist">
</table>
<div id="pager">
</div>
Javascript中JqGrid的配置代码:
jQuery("#jqgridlist").jqGrid({ url: 'DataHandler.ashx',
datatype: function (pdata) {
$.ajax({ url: 'DataHandler.ashx',
dataType: "json", type: "post",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: pdata,
error: function (data, status, statusText) {
if (!(status == 200 && statusText == "parsererror"))
alert("客服端解析数据错误!\n请与管理员联系");
else
alert"请求服务器错误!\n请稍后再试或与管理员联系");
},
complete: function (jsondata, stat) {
if (stat == "success") {
var thegrid = jQuery("#jqgridlist")[0],
data = eval("(" + jsondata.responseText + ")");
thegrid.addJSONData(data);
data = null;
jsondata = null;
}
}
});
},
colNames: ["行号", "日期期间", "c_code", "单位名称", "销售回款", "营业收入", "工业总产值", "利润总额", "上交税金"],
colModel: [{ name: "ROWNUM", index: "ROWNUM", editable: false, summaryType: 'count',
summaryTpl: '({0}) total'
},
{ name: "JHQJ", index: "JHQJ", editable: true, stype: 'text', search: true, searchoptions: { sopt: ['eq'] },
editoptions: { style: "border:0; background-color:transparent;" }
},
{ name: "C_CODE", index: "C_CODE", sortable: false, editable: true, search: false, hidden: true,
editrules: { edithidden: false }, editoptions: { style: "border:0; background-color:transparent;" }
},
{ name: "DWJC", index: "DWJC", editable: true, search: true, stype: 'text', searchoptions: { sopt: ['cn'] },
editoptions: { style: "border:0; background-color:transparent;" }
},
{ name: "a21", index: "a21", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a22", index: "a22", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a23", index: "a23", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a24", index: "a24", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a25", index: "a25", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
}
],
height: 400,
autowidth: true,
width: 700,
rowNum: 70,
rowTotal: 1300,
rowList: [13, 70, 100],
rownumbers: false,
loadonce: true,
loadtext: '載入中...',
forceFit: true,
gridview: true,
pager: '#pager',
sortname: 'ROWNUM',
scroll: 0,
page: 1,
viewrecords: true,
editurl: 'DataHandler.ashx',
sortorder: "asc",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
grouping: false,
groupingView: {
groupField: ['DWJC'],
groupColumnShow: [true],
groupText: ['<b>{0}</b>'],
groupCollapse: false,
groupOrder: ['asc'],
groupSummary: [false],
groupDataSorted: true
},
gridComplete: function () {
$("#jqgridlist").setGridParam({ datatype: 'local' });
},
caption: "<table><tr><td>分组:<select id='chngroup'> <option value='clear'>清除分组</option> <option value='DWJC'>单位名称</option><option value='JHQJ'>日期期间</option></select></td><td><div class='slider'><div class='slider_context'><ul></ul></div><div class='btn_pre'> </div><div class='btn_next'> </div></div></div></td></tr></table>"
});
对一些属性做一个解释:
datatype:如果设置成json ,那么请求的数据是json格式。而且每次增删查改操作,都会请求服务器。
如果设置成local ,那么所有操作都将在是客服端完成,不发送到服务器。
如果设置成函数(见本示例),每次获取数据,都会经过本函数处理一次。
可以通过调试JS代码,来验证。
rownumbers: 设置成false,就不显示行号;否则反之
loadonce: 设置成true,表示一次性导入数据;默认为false
rowTotal: 表色一次性导入数据的最大行数。
jsonReader:配置与服务器端返回的数据做相关对应,详细情况见文档:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
gridComplete:全部数据加载完成并且其他所有处理事件完成时触发。英文文档解释:This fires after all the data is loaded into the grid and all other processes are complete. Also the event fires independent from the datatype parameter and after sorting paging and etc.如果你只是数据加载完成时就需要触发某个函数,可以采用loadComplete事件。
loadComplete:This event is executed immediately after every server request. data Data from the response depending on datatype grid parameter
caption:字符串类型。表格的标题。但这里可以写一些html代码,这是一个小技巧。
grouping :默认false 不分组,反之亦然。
groupingView:关于分组:请参考JqGrid Demo,里面有详细介绍。
editurl:编辑数据发送Url
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
jQuery("#jqgridlist").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true, closeAfterSearch: true, closeOnEscape: true })
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon-pencil",
onClickButton: function () {
var gr = jQuery("#jqgridlist").jqGrid("getGridParam", "selrow");
if (gr != null)
jQuery("#jqgridlist").jqGrid("editGridRow", gr, {
afterclickPgButtons: function (whichbutton, formid, rowid) {
var ret = jQuery("#jqgridlist").jqGrid('getRowData', rowid),
objYear = ret.JHQJ;
if (!ValidateDate(objYear)) jQuery("#sData").attr('disabled', 'disabled');
else
jQuery("#sData").removeAttr('disabled');
},
afterShowForm: function (formid) {
var jqgrid = jQuery("#jqgridlist");
var rowid = jqgrid.jqGrid("getGridParam", "selrow"),
ret = jqgrid.jqGrid('getRowData', rowid);
if (!ValidateDate(ret.JHQJ)) jQuery("#sData").attr('disabled', 'disabled');
else
jQuery("#sData").removeAttr('disabled');
},
beforeSubmit: function (postdata, formid) {
var reg = "^(([1-9]\\d*)|0)(\\.\\d{1,2})?$";
if (!Regex(reg, postdata.a21))
return [false, "销售回款 格式错误"];
if (!Regex(reg, postdata.a22))
return [false, "营业收入 格式错误"];
if (!Regex(reg, postdata.a23))
return [false, "工业总产值 格式错误"];
if (!Regex(reg, postdata.a24))
return [false, "利润总额 格式错误"];
if (!Regex(reg, postdata.a25))
return [false, "上交税金 格式错误"];
else
return [true, ""];
},
afterSubmit: function (response, postdata) {
var json = response.responseText; //format is {status:"success/error",msg:""}
var result = eval("(" + json + ")"), successs = false;
if ("success" == result.status) {
successs = true;
$("#FormError td").html(result.msg);
$("#FormError").show();
}
return [successs, result.msg, ""];
}
});
else
alert("请选择行");
},
position: "first",
title: "修改",
cursor: "pointer"
}).filterToolbar({ stringResult: true, autosearch: true, searchOnEnter: false, groupOp: "AND" });
function Regex(reg, val) {
var patt = new RegExp(reg, "g");
return patt.test(val);
}
function ValidateDate(objYear) {
var year = null,
month = null,
currentYear = null,
date = new Date();
if (objYear.length == 4) {
year = parseInt(objYear.substr(0, 4));
currentYear = parseInt(date.getFullYear());
} else {
year = parseInt(objYear.substr(0, 6))
month = (date.getMonth() + 1).toString();
month = month.length == 1 ? "0" + month : month;
currentYear = parseInt(date.getFullYear() + month);
}
if (year <= currentYear)
return false; //不?可¨¦以°?编À¨¤辑-
else
return true; //可¨¦以°?编À¨¤辑-
}
});
////////////////////////////////////////////////////////////////////////////////////////////////////
动态改变分组
jQuery("#chngroup").live("change", function () {
var vl = $(this).val(); if (vl) {
if (vl == "clear") {
jQuery("#jqgridlist").jqGrid('groupingRemove', true);
} else {
jQuery("#jqgridlist").jqGrid('groupingGroupBy', vl);
}
}
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////
Slider 控制代码
function CreateYearList() {
var currentYear = parseInt(new Date().getFullYear());
var mulitYear = currentYear - 1990;
var objul = $(".slider_context ul");
if (mulitYear >= 0) {
for (var index = -1, len = mulitYear; index <= len; index++) {
if (currentYear - index == currentYear)
objul.append("<li class='selected'>" + currentYear.toString() + "</li>");
else
objul.append("<li>" + (currentYear - index).toString() + "</li>");
}
} else {
objul.append("<li class='selected'>" + currentYear.toString() + "</li>");
}
}
$(function () {
CreateYearList();
$(".slider").silder({
speed: "normal",
slideBy: 2
});
});
$(".slider_context li").live("click", function () {
$.each($(".slider_context li"), function (id, item) {
$(this).removeClass('selected');
});
$(this).addClass('selected');
var yearVal = $(this).html();
var jqgrid = $("#jqgridlist");
jqgrid.setGridParam({ datatype: 'json' });
jqgrid.jqGrid('appendPostData', { year: yearVal, f: "year" });
jqgrid.trigger("reloadGrid");
jqgrid.jqGrid('removePostDataItem', "f");
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var jqgrid = $("#jqgridlist");
//即本次修改前 先将datatype修改成json,否则不能回发到服务器
jqgrid.setGridParam({ datatype: 'json' });
jqgrid.jqGrid('appendPostData', { year: yearVal, f: "year" });//添加PostData
jqgrid.trigger("reloadGrid");//重新加载JqGrid
jqgrid.jqGrid('removePostDataItem', "f");//删除PostData
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
gridComplete: function () {
$("#jqgridlist").setGridParam({ datatype: 'local' });
},
每次加载完成 就将jqgrid设置成本地数据
相关推荐
jQgrid中文文档API jQgrid是一个功能强大且流行的JavaScript插件,用于创建交互式表格。它基于jQuery库,提供了许多强大的功能,例如排序、过滤、编辑、分页等,使得开发者可以快速创建复杂的表格应用程序。本文将...
jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据。这个"jqGrid4.6完整包"包含了所有你需要的组件来构建功能丰富的、可编辑的表格。以下是关于 jqGrid 4.6 版本的一些关键知识点: 1. **jqGrid ...
JqGrid是一款强大的JavaScript数据网格组件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑和格式化数据。本中文API文档将帮助开发者深入理解并有效利用JqGrid的...
《jQuery.jqGrid详解——打造高效数据管理界面》 jQuery.jqGrid是一款强大的JavaScript插件,主要用于构建数据密集型Web应用程序,特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性...
jqGrid是一款功能强大的jQuery插件,专用于在Web页面上展示和操作表格数据。它以其高效、灵活和可定制性而受到开发者的广泛欢迎。在jqGrid 4.6和4.7这两个版本中,我们可以深入探讨一些核心知识点: 1. **数据网格...
jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作大量结构化数据。这个"jqGrid demo (完整版)"提供了一个全面的示例,可以帮助开发者更好地理解和应用 jqGrid,无论是在 PHP 或 JSP 环境中。 1....
jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据表格。它提供了丰富的功能,如数据分页、排序、过滤、编辑和更多。本资源为 jqGrid5.X 的官方全Demo下载,包含中文文档和离线演示,用户可以在...
根据提供的文件信息,我们可以提取出关于jqGrid的知识点,具体如下: 1. jqGrid基础概念 jqGrid是一个用于Web应用程序的JavaScript表格插件,它遵循典型的B/S(浏览器/服务器)架构。在这种架构中,服务器端负责...
jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作表格化的数据。在开始使用 jqGrid 之前,需要具备基本的 JavaScript 和 jQuery 知识,因为 jqGrid 是构建在 jQuery 库之上的。jQuery 提供了简便的...
jqGrid 是一个强大的 jQuery 插件,用于在网页上展示和操作数据,它提供了丰富的功能,包括数据排序、筛选、分页和编辑等。Bootstrap 4.0 是一个流行的前端框架,用于构建响应式和移动优先的网站。将 jqGrid 与 ...
jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格数据。它在Web开发领域中被广泛使用,特别是在需要处理大量结构化数据的场景下。jqGrid 3.5版本是该插件的一个较早版本,但仍然具有丰富的...
**jqGrid介绍** jqGrid是一款基于JavaScript的开源数据网格组件,它是jQuery库的一部分,用于创建交互式的、数据丰富的Web表格。jqGrid以其强大的数据管理能力、丰富的功能集和灵活的可定制性,深受开发者的喜爱。...
jqGrid 是一个强大的 jQuery 插件,用于创建交互式的、数据丰富的网格视图。这个插件支持多种功能,包括但不限于数据的增删改查、分页、排序、过滤和自定义格式化。在这个项目文件“RuanTai.Finance”中,我们将深入...
jqGrid是一款功能强大的JavaScript表格插件,用于在网页上展示并操作数据,它支持各种操作,包括数据的加载、排序、搜索以及分页等。在这个"jqgrid加载本地数据并且分页例子"中,我们将深入探讨如何利用jqGrid实现从...
var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下: var ids=$(‘#gridTable').jqGrid(‘getGridParam','selarrrow'); 如果想...
在IT领域,jqGrid是一个非常流行的JavaScript库,用于创建数据密集型网格视图。它提供了丰富的功能,包括数据检索、排序、分页以及查询。在本篇中,我们将深入探讨jqGrid中的查询功能,特别是如何根据多个或单个条件...
jqGrid 是一个强大的 jQuery 插件,用于创建交互式的表格,具有丰富的特性和自定义选项。在本文中,我们将深入探讨jqGrid中的表头锁列和排序功能的实现细节。 一、jqGrid 添加列的大标题 jqGrid 提供了设置列组...
jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示表格数据。它提供了丰富的功能,包括数据分页、排序、过滤、编辑以及我们关注的主题——上端合计行。"jqgrid_位于上端的合计行" 指的是在 jqGrid ...
jqGrid是一款功能强大的JavaScript表格插件,用于在Web页面中展示和操作数据。它支持多种功能,包括数据分页、排序、搜索、编辑等。在本教程中,我们将深入探讨如何利用jqGrid实现数据的分组显示和统计,这对于数据...