jqGrid的編輯——基礎知識

使用jqGrid修改數據

jqGrid能夠有三種方式，讓咱們來修改顯示在jqGrid中的數據。這三種方式分別是：
Cell Editing——只容許修改某一個單元格內容.（全部圖片均來自jqGrid的wiki或者jqGrid的Demo截圖）

Inline Editing——容許在jqGrid中直接修改某一行的數據

Form Editing——彈出一個新的編輯窗口進行編輯和新增

暫時先無論這三種方式，咱們來看看如何讓一個jqGrid的數據可以進行編輯呢？
其實很簡單，就是在jqGrid的colModel屬性中，設置幾個屬性：
editable
    可選值是true或者false，默認是false。用來講明這個列的數據是否可編輯。特別要注意的是，jqGrid的隱藏字段就算設置了這個屬性爲true，同樣不能被編輯。在Cell Editing以及Inline Editing模式下，只能經過把這些字段設置爲可見來修改。在Form Editing模式下，能夠經過editoptions參數來設置是否能夠修改隱藏列。
edittype
    可選的值是'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file'以及'custom'。默認值是text。
    根據名字就能夠看出來，這個屬性是設置編輯框的HTML樣式的。好比，設置爲text值，而且能夠在editoptions中設置size以及maxlength等屬性。這樣生成的HTML樣式有點相似<input type="text" size="10" maxlength="15"/>這樣。
    其中有幾個要注意：
    設置checkbox的時候，須要在editoptions中指定value值，第一個值應該是checked的時候的值。好比editoptions:{value:"Yes:No"}會設定這個checkbox編輯框，選中的時候，值是Yes，沒選中的時候值是No。建議最好都設定一下這個值。
    設置select的時候，editoptions中須要設定select下拉框的值。
        一種方式是用字符串設置editoptions的value屬性，像這樣editoption: { value: 「FE:FedEx; IN:InTime; TN:TNT」 }，這就爲下拉框設置了三個可選值。注意，冒號前面的表明的是值，冒號後面表明的是顯示值。
        第二種方式是用對象來設置editoptions的value屬性，這個時候，value值要用{}包括起來，像這樣： editoptions:{value:{1:'One',2:'Two'}}。
        第三種方式，是爲editoptions設置dataUrl參數。意思就是select的值，是經過一個URL來獲取的，好比一個Ajax請求的返回值。特別須要注意的是，在這種狀況下，URL的返回值必須是包括select以及option這些HTML標籤的。就像這樣：<select><option value="1">One</option><option value="2">Two</option></select>.這種狀況下，還能夠在editoptions中設置是否容許多選，size等等。
    設置image的時候，editoptions的src屬性用來指定圖片的地址。
    custom類型就是經過一個函數來指定須要編輯的元素，並返回須要提交的值。
        函數的定義在editoptions中說明，分別是custom_element用來指定哪個函數用來建立編輯框，注意這裏函數必須返回一個新的DOM元素，函數的參數一個是值Value，另一個是colModel的editoptions值。
        另一個是custom_value，這個函數用來在編輯完成以後返回本編輯框的值，這個函數的參數是元素對象。大概的調用格式以下：
        <script>
            //建立一個input輸入框
            function myelem (value, options) {
              var el = document.createElement("input");
              el.type="text";
              el.value = value;
              return el;
            }
            
            //獲取值
            function myvalue(elem) {
              return $(elem).val();
            }
            jQuery("#grid_id").jqGrid({
            ...
               colModel: [
                  ...
                  {name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
                  ...
               ]
            ...
            });
        </script>

editoptions
    除了上面介紹的editoptions選項外，咱們還能夠設置defaultValue等等，更復雜的東西，好比dataEvents就不介紹了。
editrules
    editrules是用來設置一些可用於可編輯列的colModel的額外屬性的。大多數的時候是用來在提交到服務器以前驗證用戶的輸入合法性的。好比editrules:{edithidden:true, required:true....}。
    可選的屬性包括：
    edithidden：只在Form Editing模式下有效，設置爲true，就可讓隱藏字段也能夠修改。
    required：設置編輯的時候是否能夠爲空（是不是必須的）。
    number：設置爲true，若是輸入值不是數字或者爲空，則會報錯。
    integer：
    minValue：
    maxValue：
    email：
    url：檢查是否是合法的URL地址。
    date：
    time：
    custom：設置爲true，則會經過一個自定義的js函數來驗證。函數定義在custom_func中。
    custom_func:傳遞給函數的值一個是須要驗證value，另外一個是定義在colModel中的name屬性值。函數必須返回一個數組，一個是驗證的結果，true或者false，另一個是驗證錯誤時候的提示字符串。形如[false,」Please enter valid value」]這樣。
    自定義驗證的例子：
    <script>
        function mypricecheck(value, colname) {
        if (value < 0 && value >20)
           return [false,"Please enter value between 0 and 20"];
        else
           return [true,""];
        }

        jQuery("#grid_id").jqGrid({
        ...
           colModel: [
              ...
              {name:'price', ..., editrules:{custom:true, custom_func:mypricecheck....}, editable:true },
              ...
           ]
        ...
        });
    </script>    < function mypricecheck(value, colname) { if (value < 0 && value >20) return [false,"Please enter value between 0 and 20"]; else return [true,""]; } jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., editrules:{custom:true, custom_func:mypricecheck....}, editable:true }, ... ] ... }); // >

formoptions（只在Form Editing方式下有效），他的主要做用是用來從新排序Form中的編輯元素，同時能夠在編輯元素前或者編輯元素後增長一些信息（好比，一些提示信息，或者一個紅色的*表示必需要填寫等等）。
    可選的屬性以下：
    elmprefix：字符串值，若是設置了，則會在編輯框以後出現一些內容(多是HTML的內容)
    elmsuffix：字符串值，若是設置了，則會在編輯框以前出現一些內容(多是HTML的內容)
    label：字符串值，若是設置了，則這個值會替換掉colNames中的值出現做爲該編輯框的標籤顯示
    rowpos：數字值，決定元素行在Form中的位置（相對於文本標籤again with the text-label）
    colpos：數字值，決定元素列在Form中的位置（相對於標籤again with the label）
    兩個編輯框能夠有相同的rowpos值，可是colpos值不一樣，這會把這兩個編輯框放到Form的同一行中。
    特別注意：若是設置了rowpos以及colpos的值，強烈推薦爲全部的其餘編輯元素都設置這些值。

 

----本文只是doc文檔的解釋，沒有太多本身的東西。接下來我會作一個Form Editing的例子，肉戲即將登場......