jqgrid 實現行編輯，表單編輯的列聯動，jqgrid表單

jqgrid 實現行編輯，表單編輯的列聯動，jqgrid表單

這個問題的情境相信大家都遇到過，比如有A,B,C三列，B,C列均為下拉框，但是C列的值是由B列的值來決定的，即C列中的值是動態變化的，變化的依據就是B列中你選擇的值。本文給出的是一個實用，簡易快捷的實現方式。先看圖：

本例子實現的如果是常白班，則班別那一列只顯示白班，否則的話，那就顯示白晚班。可以看成是兩列聯動。

實現核心代碼為：

 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的確簡單了很多。

下面我們來看看錶單編輯模式的聯動，同樣實現也很簡單。在中點擊新增，將會出現如下介面：

核心代碼為：

 //添加          {              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儲存格/行編輯模式下getRowData怎擷取資料行

參考jqGrid的原始碼，getRowData的實現方法是遍曆tr擷取td的innerhTML。 getRowData在儲存格和行編輯模式下受到影響，在表單編輯模式沒問題，因為表單沒有直接修改jqGrid產生輸入對象，而是在新的控制項中產生編輯對象。 要想在儲存格和行編輯模式下getRowData返回實際的資料行，而不是包含html代碼的內容，可以參考下面的。
對於儲存格編輯，需要先還原或者儲存此儲存格，然後再調用getRowData方法，實現如下
1、給grid添加beforeEditCell事件，聲明2個window域的變數記錄儲存格的行號和列號 beforeEditCell:function(rowid,cellname,v,iRow,iCol){ lastrow = iRow; lastcell = iCol; } 2、在調用getRowData擷取資料前，先儲存/還原儲存格 $("#grid").jqGrid("saveCell",lastrow,lastcell);//儲存儲存格，切換為文字模式 //或者===> //$("#grid").jqGrid("restoreCell",lastrow,lastcell);//還原儲存格，切換為文字模式 var recs=$("#grid").jqGrid("getRowData"); 對於行編輯模式，原理一樣，還原正在編輯的行或者儲存資料到記憶體中 1，調用editRow時傳遞oneditfunc事件處理函數儲存正在編輯的行的id $('#list4').jqGrid('editRow', rowid, true, function (rowid) { window.rowid=rowid; }); 2，在調用getRowData擷取資料前，先儲存/還原正在編輯的資料行 jQuery("#grid_id").saveRow(rowid, false, 'clientArray'); //==>或者還原 //jQuery("#grid_id").restoreRow(rowid); var recs=$("#grid").jqGrid("getRowData");
 
jqGrid儲存格是下拉框,可以實現選中行的二級聯動?

jqGrid構建了一個列表，其中的幾列為下拉框， 想實現當前選中行（例如選中其中一行）下拉框的二級聯動，誰能給我點思路？ 之前想用setCell來做，但是這個方法改變的是整列的值，而不是一個下拉框的值。回答1:幫頂啦回答2:看看FindControl能找到控制項不回答3:引用2 樓 silentwins 的回複:看看FindControl能找到控制項不 我不是太明白，能不能說的更詳細點。回答4:我自己頂一下。回答5:請高手幫忙解答，感激涕零。回答6:到期不候啦。回答7:引用2 樓 silentwins 的回複:看看FindControl能找到控制項不 這個肯定不行啦。。。一般是Request.parms[你列名]回答8:我已經解決了，通過onCellSelect()和afterCellSelect()兩個事件解決的。回答10:求實列 代碼拜求