请问jqgrid 学习怎么动态的改变里边的列

来源：蜘蛛抓取(WebSpider) 时间：2012-05-10 04:23 标签： jqgrid 学习
问题描述：在做后台管理的时候我们使用了jqGrid &来控制前端显示，但是在开发中碰到了一种特殊情况，即colModel 不确定的情况，原因是我们在项目中通过构造器生成了大量的模板，而且这个模板数目是不断增长的，所以需要一种后台控制前端显示的方法。
刚开始查询了大量的资料，尝试了很多方法发现都不能解决我们这个问题，后来浏览了一下jqGrid的源码，找到了一种变通的方法。
&script type=&text/javascript&&
var options = {
listUrl : &XX!XX.do&,
var gridopt = {
url: options.listUrl+&?id=&+${id}+&&model_id=&+${model_id},
colModel:[
&span style=&color:#ff6666;&& ${&span style=&font-size:18&&colModel&/span&}&/span&
sortname: &ID&,
sortorder: &ASC&,
title: false,
usepager: true,
showcheckbox: false,
autoload: true
var xjgrid = new xjGrid(&gridlist&, gridopt);
&/script&使用el表达式把后台生成的‘colModel’放入colModel[ ]中。至于后台生成的‘colModel’ 则是
{ display: 'ID', name: 'ID',hide:false, width: '5%', &sortable: false, align: 'left', iskey: true , process: addhref},
{ display: 'XX', name: 'XX',hide:false, width: '5%', &sortable: false, align: 'left', iskey: true },
{ display: 'XX', name: 'XX',hide:false, width: '5%', &sortable: false, align: 'left', iskey: true },
这样的字符串。后台生成的代码就不贴了，每个项目的逻辑都不一样。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：9178次
排名：千里之外
(1)(1)(1)(3)(1)(1)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&jqgrid 实现行编辑，表单编辑的列联动
这个问题的场景相信大家都遇到过，比如有A,B,C三列，B,C列均为下拉框，但是C列的值是由B列的值来决定的，即C列中的值是动态变化的，变化的依据就是B列中你选择的值。本文给出的是一个实用，简易快捷的实现方式。先看图：
本例子实现的如果是常白班，则班别那一列只显示白班，否则的话，那就显示白晚班。可以看成是两列联动。
实现核心代码为：
onSelectRow: function (id) {
if (id && id !== lastSel) {
jQuery(&#TblClassTypeId&).restoreRow(lastSel);
var editkey = $('#TblClassTypeId').jqGrid('getCell', id, 'Id_Key');
var editparameters = {
keys: true,
extraparam: {
&editkey&: editkey
oneditfunc: function () {
$('#' + id + '_WorkerId').attr('readonly', true);
jQuery(&#TblClassTypeId&).editRow(id, editparameters);
$('#' + id + '_IsAlwaysDay').change(function () {
var selectvalue = $(this).val();
var classTypeCol = $('#' + id + '_ClassType');
classTypeCol.empty();
if (selectvalue == &是&) {
classTypeCol.append(&&option value=\&白班\&&白班&/option&&);
classTypeCol.append(&&option value=\&白班\&&白班&/option&&)
.append(&&option value=\&晚班\&&晚班&/option&&);
},在行编辑模式中，选择触发动作为选择行(onSelectRow)时。这时，输入单元格的空间Id为id+&_colName&。id为行的id. &拿到控件的Id,就可以添加select的change事件。在这个事件中可以进行联动列的处理。如上面代码，由于下拉选项比较简单，我选择直接赋值。如果下拉选项比较多的话，可以用ajax从服务端获取。
实现行编辑模式中的列联动是不是很简单。相对于网上介绍的用列的formaterr与unformat和custom_element与custom_value的确简单了很多。
下面我们来看看表单编辑模式的联动，同样实现也很简单。在上图中点击新增，将会出现如下界面：
核心代码为：
beforeShowForm : function (formid)
$('#WorkerId', formid).removeAttr(&readonly&, &readonly&);
$('#IsAlwaysDay',formid).change(function () {
var selectvalue = $(this).val();
var classTypeCol = $('#ClassType',formid);
classTypeCol.empty();
if (selectvalue == &是&) {
classTypeCol.append(&&option value=\&白班\&&白班&/option&&);
classTypeCol.append(&&option value=\&白班\&&白班&/option&&)
.append(&&option value=\&晚班\&&晚班&/option&&);
reloadAfterSubmit: true,
在添加按钮对应的事件beforeShowForm中，获取控件Id为$(#colName,formId). & formId为jqgird自动传送给我们的。获取到控件的Id后，后面的实现方式就很相似了。问题也就解决了。
关于这个实现方式，我也查了很多的资料，比对了不同的实现方式。总想找到一个快捷简易的实现方式。当然，这只是个演示示例，如果实战，这些代码都可以进行再封装重构，可以实现更简单。
OK，讲解完了，希望对大家有所帮助。在这里要感谢一下这个看起来有点像韩寒的兄弟：，他的这篇文章给了我本文的实现灵感。
本分类共有文章2篇,更多信息详见
& 2012 - 2014 &
&All Rights Reserved. &
/*爱悠闲图+*/
var cpro_id = "u1888441";
/*爱悠闲底部960*75*/
var cpro_id = "u1888128";&&&&jqgrid行编辑+动态为其他列赋值
jqgrid行编辑+动态为其他列赋值
该方式是在jqgrid的列基础上进行编辑，为列添加保存事件，文本域和输入框采用blur失去焦点的方式进行保存，该方法含有点击为其他列赋值的功能。参考api列子并结合自己公司功能需求。
若举报审核通过，可奖励20下载分
被举报人：
wang12deng13
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
开发技术下载排行jqGrid frozencolumn
　　开发者很容易冻结/锁定jqGrid的一些列。锁定的列不会滚动出可见区域当滚动jqGrid的水平滚动条时，这样如果有很多列grid出现水平滚动条时，可以保持某些列始终可见。
　　首先需要设置哪些列需要冻结或者锁定，可以在colModel中设置frozen：true，下面为示例
jQuery(&#grid&).jqGrid({
colNames: [&#39;Date&#39;, &#39;Client&#39;, &#39;Amount&#39;, &#39;Tax&#39;, &#39;Total&#39;, &#39;Closed&#39;, &#39;Shipped via&#39;, &#39;Notes&#39;],
colModel: [
{name: &#39;name&#39;, index: &#39;name&#39;, width: 70, frozen:true },
{name: &#39;invdate&#39;, index: &#39;invdate&#39;, width: 80, align: &#39;center&#39;, sorttype: &#39;date&#39;,
formatter: &#39;date&#39;, formatoptions: {newformat: &#39;d-M-Y&#39;}, datefmt: &#39;d-M-Y&#39;, frozen:true},
{name: &#39;name&#39;, index: &#39;name&#39;, width: 70 },
{name: &#39;amount&#39;, index: &#39;amount&#39;, width: 75, formatter: &#39;number&#39;, sorttype: &#39;number&#39;, align: &#39;right&#39;},
{name: &#39;tax&#39;, index: &#39;tax&#39;, width: 75, formatter: &#39;number&#39;, sorttype: &#39;number&#39;, align: &#39;right&#39;},
{name: &#39;total&#39;, index: &#39;total&#39;, width: 75, formatter: &#39;number&#39;, sorttype: &#39;number&#39;, align: &#39;right&#39;},
{name: &#39;closed&#39;, index: &#39;closed&#39;, width: 75, align: &#39;center&#39;, formatter: &#39;checkbox&#39;,
edittype: &#39;checkbox&#39;, editoptions: {value: &#39;Yes:No&#39;, defaultValue: &#39;Yes&#39;}},
{name: &#39;ship_via&#39;, index: &#39;ship_via&#39;, width: 100, align: &#39;center&#39;, formatter: &#39;select&#39;,
edittype: &#39;select&#39;, editoptions: {value: &#39;FE:FedEx;TN:TNT;IN:Intim&#39;, defaultValue: &#39;Intime&#39;}},
{name: &#39;note&#39;, index: &#39;note&#39;, width: 70, sortable: false}
rowNum: 10,
rowList: [5, 10, 20],
　　然后调用执行冻结／锁定的方法
jQuery(&#grid&).jqGrid(&#39;setFrozenColumns&#39;);
　　注意frozen属性需要连续的，如果某列没有设置frozen属性，则从第一个设置了frozen的列开始锁定（Note that the frozen property should be set one after other. If there is a missing frozen property in the sequence then the last position which meet this criteria will be used.）【这里说的好像是从最后开始设置满足的序列开始，但是下面的列子说的确是第一个】
　　下面的代码只锁定第一列，尽管第三列也设置了frozen。（The below code will lock only the first column instead that you have set the third field to be frozen:）
jQuery(&#grid&).jqGrid({
colNames: [&#39;Date&#39;, &#39;Client&#39;, &#39;Amount&#39;, &#39;Tax&#39;, &#39;Total&#39;, &#39;Closed&#39;, &#39;Shipped via&#39;, &#39;Notes&#39;],
colModel: [
{name: &#39;name&#39;, index: &#39;name&#39;, width: 70, frozen:true },
{name: &#39;invdate&#39;, index: &#39;invdate&#39;, width: 80, align: &#39;center&#39;, sorttype: &#39;date&#39;,
formatter: &#39;date&#39;, formatoptions: {newformat: &#39;d-M-Y&#39;}, datefmt: &#39;d-M-Y&#39;},
{name: &#39;name&#39;, index: &#39;name&#39;, width: 70, frozen:true},
{name: &#39;amount&#39;, index: &#39;amount&#39;, width: 75, formatter: &#39;number&#39;, sorttype: &#39;number&#39;, align: &#39;right&#39;},
{name: &#39;tax&#39;, index: &#39;tax&#39;, width: 75, formatter: &#39;number&#39;, sorttype: &#39;number&#39;, align: &#39;right&#39;},
{name: &#39;total&#39;, index: &#39;total&#39;, width: 75, formatter: &#39;number&#39;, sorttype: &#39;number&#39;, align: &#39;right&#39;},
{name: &#39;closed&#39;, index: &#39;closed&#39;, width: 75, align: &#39;center&#39;, formatter: &#39;checkbox&#39;,
edittype: &#39;checkbox&#39;, editoptions: {value: &#39;Yes:No&#39;, defaultValue: &#39;Yes&#39;}},
{name: &#39;ship_via&#39;, index: &#39;ship_via&#39;, width: 100, align: &#39;center&#39;, formatter: &#39;select&#39;,
edittype: &#39;select&#39;, editoptions: {value: &#39;FE:FedEx;TN:TNT;IN:Intim&#39;, defaultValue: &#39;Intime&#39;}},
{name: &#39;note&#39;, index: &#39;note&#39;, width: 70, sortable: false}
rowNum: 10,
rowList: [5, 10, 20],
jQuery(&#grid&).jqGrid(&#39;setFrozenColumns&#39;);
　　使用 destroyFrozenColumns方法取消（销毁）锁定列。此方法在调用setupFrozenColums前还原表格配置。
jQuery(&#grid&).jqGrid(&#39;destroyFrozenColumns&#39;);
　　可以动态改变冻结的列，需要先调用destroyFrozenColumns 方法设置新冻结属性，然后再次调用 setFrozenColumns。示例给出如何将invdate列设置为冻结的列
jQuery(&#mybutton&).click(function(){
jQuery(&#grid&)
.jqGrid(&#39;destroyFrozenColumns&#39;);
.jqGrid(&#39;setColProp&#39;,&#39;invdate&#39;, {frozen:true});
.jqGrid(&#39;setFrozenColumns&#39;);
.trigger(&#39;reloadGrid&#39;, [{current:true}]);
　　要使配置生效需要调用 trigger(&#39;reloadGrid&#39;).。
下面限制告诉你冻结的列不能设置，失效
启用了树形表格时（ TreeGrid ）
启用了子表格（SubGrid）
启用了单元格编辑（cellEdit）
使用行编辑，冻结的列不能为编辑
设置了可排序的列，jqGrid的sortable设置为true或者方法
scroll配置为true或者1
启用了数据分组
启用页脚数据行（footerrowcab参数）
原创文章，转载请注明出处：
阅读(423)喜欢(0)不喜欢(0)分类：
上一篇：下一篇：

我要回帖

更多关于 jqgrid 学习 的文章

 

随机推荐