2. 程式人生 > >jqGrid的若幹種用法

jqGrid的若幹種用法

阿新 • • 發佈：2017-05-31
驗證 oat clear rand 運算 arr num 並不是 eight

支持多種類型的數據集合作為數據源

　　jqGrid可以綁定三種類型的數據:XML,JSON和數組。使用不同的數據類型主要是設置datatype屬性,它的值分別為‘xml‘,‘json‘,‘local‘(數組)

$("#grid1").jqgrid(
........
datatype: "xml",
........
);

　　下面則列舉各種數據類型的格式

　　XML格式：　

技術分享 
<rows>
  <page></page>
  <total></total>
  <records></records>
  <row id="rowid">
    <cell>value1</cell>
    .........
    <cell>valueN</cell>
  </row>
</rows>
技術分享

　　json格式

{"page":"頁號","rows":[{name1:‘value1‘,name2:‘value2‘,.....nameN:‘valueN‘},.... {....} ], "total":記錄數,"records":總記錄數}

　　數組格式

技術分享 
var datas=[
{name1:‘value1‘,name2:‘value2‘,..... nameN:‘valueN‘},
.... 
{....} 
];

//把數據添加到jqgrid裏
for (var i = 0; i <= mydata.length; i++) {
    jQuery("#grid1").jqGrid(‘addRowData‘, i + 1, mydata[i]);
}
技術分享

或者設置data屬性

技術分享 
$("#grid1").jqgrid(
......
       data:mydata,
　　　　datatype:‘local‘,
.......
);
技術分享

統計運算的功能

　　將footerrow設為true,綁定gridComplete事件。

技術分享 
$("#grid1").jqgrid(
......
        footerrow: true,
        gridComplete: completeMethod,
.......
);

    function completeMethod()
    {
        var sum_amount=$("#grid1").getCol(‘amount‘,false,‘sum‘);
        var sum_tax=$("#grid1").getCol(‘tax‘,false,‘sum‘);
        var sum_total=$("#grid1").getCol(‘total‘,false,‘sum‘);
        $("#grid1").footerData(‘set‘, { name: ‘合計:‘, amount: sum_amount, tax: sum_tax, total: sum_total });
   }
技術分享

　　統計時利用getCol方法，第一個參數為colMode的name值，第二個設為false，否則會返回一個數組而不是但一個數據，第三個是設置統計方式，有‘sum‘,‘avg‘和‘count‘。

排序

　　只要單擊列的標題，就可以對該列進行升序或降序的排序。設置該列是否允許排序，在列的屬性裏設置sortable，同時對於不同的數據類型，也需要設置其相應的排序類型sorttype，類型有int/integer 整型,float/number/currency 浮點型，date 日期，text 文本，function 定義函數來實現自定的排序規則。

技術分享 


$("#grid1").jqgrid(


........
colModel: [

.........
       { name: ‘id‘, index: ‘id‘, width: 60, myexport: true, editable: true , sorttype: "int", sortable: true},
.............

],
........
);

技術分享


 


 


分組

技術分享最簡單的分組

 


還有復雜一點的排序，那還是上jqGrid Demos看看吧！


篩選


　　jqGrid的篩選並不是在grid裏面的內容進行篩選，其實是對數據庫裏的數據篩選查詢。


　　html:



<table id="s2list"></table>
 <div id="s2pager"></div>



　　javascript:


技術分享

 jQuery("#s3list").jqGrid(‘navGrid‘,‘#s3pager‘,{edit:false,add:false,del:false,search:false,refresh:false});
 jQuery("#s3list").jqGrid(‘navButtonAdd‘,"#s3pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :‘ui-icon-pin-s‘, 
　　　　onClickButton:function(){
　　　　　　 mygrid[0].toggleToolbar() 
　　}
});
jQuery("#s3list").jqGrid(‘navButtonAdd‘,"#s3pager",{caption:"Clear",title:"Clear Search",buttonicon :‘ui-icon-refresh‘,
　　　　 onClickButton:function(){ 
　　　　　　mygrid[0].clearToolbar() 
　　}
}); 
jQuery("#s3list").jqGrid(‘filterToolbar‘);

技術分享


 


增刪改查工具欄及分頁欄
　　jqGrid附帶了分頁欄，在分頁欄上可以添加增加，修改，刪除以及查詢按鈕。


　　在html多添加一個層，這個層就存放分頁欄：



<div id="pager"></div>



技術分享

$("#grid1").jqgrid(
......
        pager:"#pager",
　　　　　//通過這屬性還可以設置可選的頁面大小
　　　　 rowList: [10, 20, 30],
.......
);
//這裏的 edit,add等就是對應編輯新增等按鈕，通過設置布爾值來決定是否顯示
jQuery("#grid1").jqGrid(‘navGrid‘, ‘#pager‘, { edit: true, add: true, del: true, search: true, refresh: true});
//或者用這種形式


　　jQuery("#grid1").jqGrid(‘navGrid‘, ‘#pager‘,
　　　　{}, //options
　　　　{height: 280, reloadAfterSubmit: false }, // edit options
　　　　{height: 280, reloadAfterSubmit: false }, // add options
　　　　{reloadAfterSubmit: false }, // del options
　　　　{} // search options
　　);


 

技術分享


記得要在colModel裏給可供編輯的列的editable賦值為true，才可以編輯。


 


分頁讀取數據


 　　既然上面已提及到分頁，下面則介紹另一種分頁方式，通過滾動條進行翻頁。在這種分頁方式中，數據庫的所有數據並非一下子讀取出來填充到grid中，而是通過滾動條的位置得出當前瀏覽到的哪一頁數據，才從數據庫讀取那部分的數據。


技術分享

$("#grid1").jqgrid(
......
        //設置了這個才會根據滾動分頁讀取數據
        scroll: 1,
　　  //設置頁面的大小
　　  rowNum: 10,
.......
);

技術分享


下面的例子只是用到本地的數據，同樣也是實現了滾動翻頁的效果

技術分享滾動條翻頁

 


父子表


　　通過以下設置可使用子表


技術分享

$("#grid1").jqgrid(
......
     //啟用子表
        subGrid : true,
    subGridUrl: ‘............‘,
    //設置子表的屬性
    subGridModel: [{
                  name  : [‘name1‘,‘name2‘,......,‘nameN‘], 
                   width : [width1,width2,.....,widthN] } ],
.......
);        

技術分享


 


這裏子表的設置只是最基本的，更多屬性的資料可參閱 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid


 


Get/Set 單元格的值


　　獲取某個單元格的值就調用getCell(rowid, iCol) 。iCol既可以是當前列在colModel中的位置索引也可以是name值。註意：在編輯行或者單元格時不能使用此方法，此時返回的並不是改變的值，而是原始值。


　　設置某個單元格的值就調用setCell(rowid,colname, data, class, properties)。rowid：當前行id；colname：列名稱，也可以是列的位置索引，從0開始；data：改變單元格的內容，如果為空則不更 新；class：如果是string則會使用addClass方法將其加入到單元格的css中，如果是array則會直接加到style屬性中；properties：設置單元格屬性colModel。


　　當然也可以Get/Set 行或者列，在這裏可查閱更多get/set/add的方法http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods


 


 數據驗證


 　　通過設置colModel的editrules屬性，可以對輸入的數據進行驗證


技術分享

jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:‘price‘, ..., editrules:{edithidden:true, required:true....}, editable:true },
      ...
   ]
...
});

技術分享


下面則是可用的驗證選項





選項類型描述



edithidden
boolean


這個選項只適用於表單編輯模塊。默認情況下隱藏的字段是不可編輯的。如果該字段隱藏在grid中並且edithidden設置為true，當調用增加或編輯方法時該字段就可以編輯。






required
boolean
（true或false）如果設置為true，該值將被檢查，如果為空，錯誤信息將被顯示。




number
boolean
（true或false）如果設置為true，該值將被檢查，如果這不是一個數字，一個錯誤信息將被顯示。




integer
boolean
（true或false）如果設置為true，該值將被檢查，如果這不是一個整數，錯誤信息將被顯示。




minValue
number(integer)
如果設置了值，單元格的值將被檢查，如果單元格的值小於這個值，就會顯示錯誤信息。




maxValue
number(integer)
如果設置了值，單元格的值將被檢查，如果單元格的值大於這個值，就會顯示錯誤信息。




email
boolean
如果設置為true，則該值將被檢查，如果這是無效的電子郵箱地址，將顯示一條錯誤消息。




url
boolean
如果設置為true，則該值將被檢查，如果這不是有效的URL，將顯示一條錯誤消息。




date
boolean
如果設置為true，則該值將被檢查，如果不是有效的日期，將顯示一條錯誤消息。




time
boolean
如果設置為true，則該值將被檢查，如果這不是有效的時間，錯誤信息將被顯示。目前只支持hh：mm格式和可選的AM / PM結束時




custom
boolean
如果設置為true，允許通過自定義功能自定義檢查規則的定義。




custom_func
function


當custom設置為true時，function一定要使用。傳遞到此函數的參數是value,該值一定要被檢查和命名。該函數一定要返回由以下參數組成的數組:1，true/false。2，返回給用戶的錯誤信息。例如[false,"請輸入正確的數據"]。








 


設置條帶狀的列


技術分享

jQuery("#ghcs").jqGrid(‘setGroupHeaders‘, {
　//設置列頭是否啟用colSpan效果
  useColSpanStyle: false, 
  groupHeaders:[
    {　　
　　　　startColumnName: ‘colName‘,   //合並列組的第一個列名


　　　　numberOfColumns: number,  //合並列的數量
　　　　titleText: ‘title‘ //合並列的標題
　　　},
　　　　........

  ]    
}

技術分享


 


 


編輯器


　　jqGrid的模板列自帶了一些很基本的編輯器，包括：‘text‘單行文本框, ‘textarea‘多行文本框, ‘select‘下拉框, ‘checkbox‘復選框, ‘password‘密碼框, ‘button‘按鈕, ‘image‘圖片按鈕, ‘file‘文件上傳框 以及‘custom‘自定義編輯器。


在colModel裏設置edittype則可


技術分享

jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:‘price‘, ..., editable:true, edittype:‘text‘,editoptions: {size:10, maxlength: 15}....},
　　　　 ... 
　　] 
　　... 
});

技術分享


其中editoption是對編輯器的一些設置，文本框就可以設置size,maxlength等；復選框可設置value ；



ditoptions: { value:"Yes:No" }



下拉框以這種形式



editoptions: { value: “val1:text1; val2:text2; val3:text3” }



更多資料參閱http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype


 


模板列調用其他編輯器


上面介紹的編輯器只是使用了html的表單元素而已，下面介紹的是調用插件。


技術分享

<script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>

<script type="text/javascript">

        function InitDatePicker(cl) {
            $(cl).click(function () {
                WdatePicker();
            });
        }
        ....

        jQuery("#grid_id").jqGrid({
    ...
       colModel: [ 
              ... 
              {name:‘date‘, ..., editable:true, edittype:‘text‘,editoptions: {dataInit:InitDatePicker}....},
　　　　     ... 
　　        ] ,
　　    ... 
    });

    .......

</script>

技術分享


這裏調用了My97DatePicker插件作為日歷編輯器。


如果想在一個模板列裏放置多種控件，可以用一下方式


技術分享

 jQuery("#grid_id").jqGrid({
    ...
      afterInsertRow: function (rowid, aData) {
         var  controls=" ";  //放置在模板裏的控件
         .......
        $("#grid_id").jqGrid(‘setCell‘, rowid, ‘tag‘, controls);
    }
　　    ... 
    });

技術分享


這個其實是在grid的單元格內通過編輯其html來實現。


 


模仿Excel移動選擇單元格


　　設置單元格編輯模式後，可以通過上下左右的導航鍵跳到需要編輯的單元格，按回車進入編輯狀態，按Esc鍵不保存更改內容，按回車保存更改內容


技術分享

jQuery("#grid_id").jqGrid({
    ...
    cellEdit:true,
     cellsubmit:‘clientArray‘,  //定義了單元格內容保存位置 默認值是‘remote‘
　　    ... 
    });

技術分享

jqGrid的若幹種用法
   
 
 
 
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
jqGrid的若幹種用法

     
 驗證   oat   clear   rand   運算   arr   num   並不是   eight   支持多種類型的數據集合作為數據源
　　jqGrid可以綁定三種類型的數據:XML,JSON和數組。使用不同的數據類型主要是設置datatype屬性,它的值分別為‘xml‘,‘json‘,‘loca 



  
 

    


    
    
求解自然數冪和的若幹種方法

     
 class   there   排列   span   序列   mat   復雜   一個   時間   問題的引入
給定\(n,k\)求\[\sum_{i=1}^ni^k\]
1. 循環
四年級應該會循環了。
能做到\(O(nk)\)的優秀時間復雜度。
2. 快速冪
五年級學了快速冪之後就能做到\(O(n 



  
 

    


    
    
樹鏈剖分的一種用法

     
 我們   祖先   單點   數組   樹狀數組   實現   修改   相加   比較   這篇文章好像發得有點遲了啊QAQ之前忘了發了  又好久沒更了，講一個提高組內容。  我們來考慮一個有趣的問題，我們有一棵有根樹，每個點有點權，要求支持單點加，子樹加。  詢問比較奇怪，每個點有一個點權x，假裝不變，每 



  
 

    


    
    
奪命雷公狗C/C++-----5---include的兩種用法

     
 編寫   logs   ima   log   -1   們的   頭文件   技術   我們   我們的include是有兩種用法的，如：

 
上面這種就是在頭文件方式進行引入的，  include  <>  括號的是包含系統文件的。。。。
還有一種，比如我首先寫個頭文件先，如下所示：

 
 



  
 

    


    
    
搭建基於Ant+Jmeter+jenkins的自動負載測試框架的若幹問題記錄及解決

     
 例如   需要   ras   分享   測試框架   ron   jpg   技術   small   1.關於構建時使用的默認build.xml問題
 如圖，如果構建腳本build.xml不在workspace根目錄、或者說構建腳本不叫build.xml。那麽需要在高級裏設置Build File選項的路徑 



  
 

    


    
    
mysql中模糊查詢的四種用法介紹

     
 包含   如果   正則   搜索   name   模糊查詢   長度   use   mysql   下面介紹mysql中模糊查詢的四種用法： 1，%：表示任意0個或多個字符。可匹配任意類型和長度的字符，有些情況下若是中文，請使用兩個百分號（%%）表示。 比如 SELECT * FROM [user] W 



  
 

    


    
    
Shell函數的7種用法介紹

     
 函數返回值   cor   ont   引用   local   bds   ()   位置   位置參數   
1. 在shell文件內部定義函數並引用：
 
復制代碼代碼如下:
[~/shell/function]# cat factorial.sh #!/bin/bashfunction factori 



  
 

    


    
    
java基礎——Collections.sort的兩種用法

     
 基本類   ==   輸出結果   code   sed   java   意思   size   htm   Collections是一個工具類，sort是其中的靜態方法，是用來對List類型進行排序的，它有兩種參數形式：

    public static <T extends Comparabl 



  
 

    


    
    
若幹排序算法簡單匯總(一)

     
 基本上   down   轉載   下載地址   後序   來看   分析   並且   復雜度   



轉載請註明出處

http://blog.csdn.net/pony_maggie/article/details/35819279





作者:小馬

從題目看，首先 



  
 

    


    
    
關於經過若幹指定節點最短路徑問題的算法。

     
 nts   圖形界面   節點   比賽   csdn   自己   mod   rac   src   

這幾天華為的軟件大賽搞得熱火朝天，身邊好多朋友報名參加了。前天，自己抽出時間也看了一下題目。一開始還以為是比較經典的最短路徑尋優問題。後來知悉看完題目，發現題目添加了一些“中間節點”限制，經過一陣 



  
 

    


    
    
PHP header的幾種用法

     
 aid   var   esp   comment   har   pos   -type   refresh   fresh   

跳轉頁面
header(‘Location:‘.$url);  //Location和":"之間無空格。



聲明content-type
header(‘content- 



  
 

    


    
    
Emacs flycheck插件配置中遇到的若幹問題

     
 add   err   user   如果   解決   ror   buffer   編譯錯誤   生成   工欲善其事必先利其器，一個高效的代碼檢查工具會大大提高我們的開發效率。flycheck是Emacs中常用的一個代碼編譯檢查工具，本文記錄配置它的時候遇到的一些問題以及解決方法。
flycheck的 



  
 

    


    
    
spring 事務的兩種用法

     
 frame   basic   版本   supports   4.2   將不   cts   eas   間接   spring事務兩種使用方法
[email protected] 註解
2.AOP 配置 xml (需要依賴包：aopalliance-1.0.jar/ aspectjweav 



  
 

    


    
    
人不成熟的若幹個特征

     
 最大   我不   鋼琴   付出   行為   事物   戰勝   能力   但是            人成熟與不成熟跟年齡沒有關系，人成熟不成熟，就是你能不能站在對方的角度去看待事物。就是能不能把我的世界變成你的世界。這個社會有很多的成年人，還沒有脫離幼稚的行為。一點小事情就跟別人爭來爭去。
人不成熟 



  
 

    


    
    
Java for循環的幾種用法

     
 java   unboxing   比較   有效   post   編譯期   環比   開始   進行   原文鏈接：Java for循環的幾種用法


J2SE 1.5提供了另一種形式的for循環。借助這種形式的for循環，可以用更簡單地方式來遍歷數組和Collection等類型的對象。本文介紹使用這種 



  
 

    


    
    
MT【101】分配問題舉例若幹

     
 tle   title   $1   style   borde   es2017   height   情況   alpha   先拿MT【100】的圖表鎮樓。舉幾個例子：【1】52張紙牌分發給4人，每人13張，問每人手中有一張小2的概率?分析：第一步每人分一張小2，有4!種，然後48張牌平均分成4組有$\ 



  
 

    


    
    
【js】this=>>4種用法

     
 new t   bit   結果   containe   www   運行   pad   con   toolbar   JS中this的四種用法
 


1.在一般函數方法中使用 this 指代全局對象







1
2
3
4
5



function test(){
　　　　this.x =  



  
 

    


    
    
小陳現有2個任務A,B要完成,每個任務分別有若幹步驟如下                     一道網上沒啥題解的難題（至少我是這麽覺得的）

     
 eid   -c   吃飯   計算   成了   題解   滿足   步驟   順序   小陳現有2個任務A,B要完成,每個任務分別有若幹步驟如下：A=a1->a2->a3,B=b1->b2->b3->b4->b5.在任何時候,小陳只能專心做某個任務的一個步驟.但是如果願 



  
 

    


    
    
關於java的自動拆裝箱若幹細節問題

     
 pack   參數   prim   gets   調用   store   成對   rac   icon   一、首先需要了解的幾個前提：
1、自動裝箱過程是通過調用valueOf方法實現（如Integer.valueOf(10)），而拆箱過程是通過調用包裝器的 xxxValue方法實現（如Integer 



  
 

    


    
    
python幾種用法的性能比較1.5

     
 +=   用法   setup   using   _array   __name__   1.5   nump   name   
import timeit

sum_by_for = """
for d in data:
    s += d
"""

sum_by_sum = """
sum(data