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设置成本地数据
相关推荐
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...
var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下: var ids=$(‘#gridTable').jqGrid(‘getGridParam','selarrrow'); 如果想...
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
; charset=utf-8"> <title>Insert title here ...<link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"> <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script> ...
jqgrid中文文档API,使用JQGRID
jqgrid
JqGrid中文API文档,包含了基础的JqGrid控件的属性方法事件等,有如何使用JqGrid的Demo.
jquery.jqgrid
jqGrid 最新版 3.7.2 离线帮助手册,方便各位查看 Installing jqGrid Before you begin System Requirements Download jqGrid Change Log How to Install How it Works My First Grid Basic Grid Conventions ...
jqgrid实现分组显示和统计的功能,jqgrid实现分组显示和统计
| ui jqgrid css js | i18n | grid locale en js | grid locale cn js | grid locale js | Changes txt | install txt | jquery jqGrid min js | jquery jqGrid src js | jquery 1 9 0 min js plugins | grid addons...
jqgrid二次封装,快速加载grid表格,不改变原有的使用习惯,增加一些默认处理逻辑 var grid = $.jqGrid.init({ url: "<%=basePath%>/component/config/select.html", add: {content:"<%=basePath%>/admin/...
jqGrid详解及高级应用
jqgrid 修改一列 。修改所有的行。通过vue.js 与jqgrid 的应用,供大家参考学习。多多提意见 。相互学习交换意见
1) 增加jqGrid视图、脚本、控制器生成器 2) 增加jqGrid列配置器 3) 全面支持jqGrid的组合搜索过滤(多条件、多比较符再也不蛋疼了) 4) 增加通用EXCEL导出(自动根据表格的宽度、可见列、筛选条件等导出数据) 5) ...
jqGrid 3.7.2 版本 官方完整帮助手册,含有很多代码样例,方便大家查看学习。 Upgrading Upgrade from 3.6.4 to 3.6.5 Upgrade from 3.4.x to 3.5 Installing jqGrid Before you begin System Requirements Download...
jquery.jqGrid-3.5.3 最新版本 jqGrid是一個jQuery的plugin,提供grid操作介面,並支援經Ajax連結伺服器上的資料源。jqGrid在共同的基礎結構上,提供數種操作模式,分別包裝於不同的檔案之中。除了共用的數個檔案...
jqgrid合并行、合并列 先看示例图片最终效果: jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state...
jqGrid 中的锁定固定的列并且关于jqGrid 中的一些排序的实现细节