码迷,mamicode.com
首页 > 其他好文 > 详细

jqgrid 实现行编辑,表单编辑的列联动

时间:2014-07-26 15:19:20      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   os   io   2014   

这个问题的场景相信大家都遇到过,比如有A,B,C三列,B,C列均为下拉框,但是C列的值是由B列的值来决定的,即C列中的值是动态变化的,变化的依据就是B列中你选择的值。本文给出的是一个实用,简易快捷的实现方式。先看图:

bubuko.com,布布扣

本例子实现的如果是常白班,则班别那一列只显示白班,否则的话,那就显示白晚班。可以看成是两列联动。

实现核心代码为:

 onSelectRow: function (id) {
                if (id && id !== lastSel) {
                    jQuery("#TblClassTypeId").restoreRow(lastSel);
                    lastSel = id;
                }
                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>");
                    }
                    else
                    {
                        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的确简单了很多。


下面我们来看看表单编辑模式的联动,同样实现也很简单。在上图中点击新增,将会出现如下界面:

bubuko.com,布布扣
核心代码为:

 //添加
          {
              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>");
                      }
                      else {
                          classTypeCol.append("<option value=\"白班\">白班</option>")
                                      .append("<option value=\"晚班\">晚班</option>");
                      }
                  });
              },
              reloadAfterSubmit: true,
          },

在添加按钮对应的事件beforeShowForm中,获取控件Id为$(#colName,formId).   formId为jqgird自动传送给我们的。获取到控件的Id后,后面的实现方式就很相似了。问题也就解决了。


关于这个实现方式,我也查了很多的资料,比对了不同的实现方式。总想找到一个快捷简易的实现方式。当然,这只是个演示示例,如果实战,这些代码都可以进行再封装重构,可以实现更简单。

OK,讲解完了,希望对大家有所帮助。在这里要感谢一下这个看起来有点像韩寒的兄弟:泰迪小贱熊,他的这篇文章jqGrid 行编辑 select 3级联动 的一种实现方法给了我本文的实现灵感。


jqgrid 实现行编辑,表单编辑的列联动,布布扣,bubuko.com

jqgrid 实现行编辑,表单编辑的列联动

标签:style   blog   http   java   color   os   io   2014   

原文地址:http://blog.csdn.net/feiying008/article/details/38140681

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!