整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          彈出層插件 jqgrid的使用

          .引用相關頭文件

          引入CSS:

          <link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />

          <link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />

          引入JS:

          <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>

          <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>

          <script src="Scripts/grid.locale-en.js" type="text/javascript"></script>

          <script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

          因為jqGrid3.6及以后的版本集成了jQuery UI,所以,此處需要導入UI相關js和css。另外grid.locale-en.js這個語言文件必須在jquery.jqGrid.min.js之前加載,否則會出問題。

          2.將jqgrid加入頁面中

          根據jqGrid的文檔,要想生成一個jqGrid,最直接的方法就是:

          $("#list").jqGrid(options);

          其中list是頁面上的一個table:<table id="list"></table>

          下面是一個簡單的例子:

          <script type="text/javascript">

          $(document).ready(function () {

          jQuery("#list").jqGrid({

          url: 'Handler.ashx',

          datatype: "json",

          mtype: 'GET',

          colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'],

          colModel: [

          { name: 'SalesReasonID', index: 'SalesReasonID', width: 40, align: "left", editable: true },

          { name: 'Name', index: 'Name', width: 100, align: "center" },

          { name: 'ReasonType', index: 'ReasonType', width: 100, align: "center" },

          { name: 'ModifiedDate', index: 'ModifiedDate', width: 150, align: "center", search: false }

          ],

          rowList: [10, 20, 30],

          sortname: 'SalesReasonID',

          viewrecords: true,

          sortorder: "desc",

          jsonReader: {

          root: "griddata",

          total: "totalpages",

          page: "currpage",

          records: "totalrecords",

          repeatitems: false

          },

          pager: jQuery('#pager'),

          rowNum: 5,

          altclass: 'altRowsColour',

          //width: 'auto',

          width: '500',

          height: 'auto',

          caption: "DemoGrid"

          }).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false }); ;

          })

          二、 jqgrid的重要選項

          具體的options參考,可以訪問jqGrid文檔關于option的章節(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options)。其中有幾個是比較常用的,重點介紹一下:

          • url :jqGrid控件通過這個參數得到需要顯示的數據,具體的返回值可以使XML也可以是Json。
          • datatype :這個參數用于設定將要得到的數據類型。類型包括:json 、xml、xmlstring、local、javascript、function。
          • mtype : 定義使用哪種方法發起請求,GET或者POST。
          • height :Grid的高度,可以接受數字、%值、auto,默認值為150。
          • width :Grid的寬度,如果未設置,則寬度應為所有列寬的之和;如果設置了寬度,則每列的寬度將會根據shrinkToFit選項的設置,進行設置。
          • shrinkToFit :此選項用于根據width計算每列寬度的算法。默認值為true。如果shrinkToFit為true且設置了width值,則每列寬度會根據width成比例縮放;如果shrinkToFit為false且設置了width值,則每列的寬度不會成比例縮放,而是保持原有設置,而Grid將會有水平滾動條。
          • autowidth :默認值為false。如果設為true,則Grid的寬度會根據父容器的寬度自動重算。重算僅發生在Grid初始化的階段;如果當父容器尺寸變化了,同時也需要變化Grid的尺寸的話,則需要在自己的代碼中調用setGridWidth方法來完成。
          • pager :定義頁碼控制條Page Bar,在上面的例子中是用一個div(<div id=”pager”></div>)來放置的。
          • sortname :指定默認的排序列,可以是列名也可以是數字。此參數會在被傳遞到Server端。
          • viewrecords :設置是否在Pager Bar顯示所有記錄的總數。
          • caption :設置Grid表格的標題,如果未設置,則標題區域不顯示。
          • rowNum :用于設置Grid中一次顯示的行數,默認值為20。正是這個選項將參數rows(prmNames中設置的)通過url選項設置的鏈接傳遞到Server。注意如果Server返回的數據行數超過了rowNum的設定,則Grid也只顯示rowNum設定的行數。
          • rowList :一個數組,用于設置Grid可以接受的rowNum值。例如[10,20,30]。
          • colNames :字符串數組,用于指定各列的題頭文本,與列的順序是對應的。
          • colModel :最重要的數組之一,用于設定各列的參數。(稍后詳述)
          • prmNames :這是一個數組,用于設置jqGrid將要向Server傳遞的參數名稱。(稍后詳述)
          • jsonReader :這又是一個數組,用來設定如何解析從Server端發回來的json數據。(稍后詳述)

          2.1 prmNames選項

          prmNames是jqGrid的一個重要選項,用于設置jqGrid將要向Server傳遞的參數名稱。其默認值為:

          prmNames : {

          page:"page", // 表示請求頁碼的參數名稱

          rows:"rows", // 表示請求行數的參數名稱

          sort: "sidx", // 表示用于排序的列名的參數名稱

          order: "sord", // 表示采用的排序方式的參數名稱

          search:"_search", // 表示是否是搜索請求的參數名稱

          nd:"nd", // 表示已經發送請求的次數的參數名稱

          id:"id", // 表示當在編輯數據模塊中發送數據時,使用的id的名稱

          oper:"oper", // operation參數名稱

          editoper:"edit", // 當在edit模式中提交數據時,操作的名稱

          addoper:"add", // 當在add模式中提交數據時,操作的名稱

          deloper:"del", // 當在delete模式中提交數據時,操作的名稱

          subgridid:"id", // 當點擊以載入數據到子表時,傳遞的數據名稱

          npage: null,

          totalrows:"totalrows" // 表示需從Server得到總共多少行數據的參數名稱,參見jqGrid選項中的rowTotal

          }

          2.2 jsonReader選項

          jsonReader是jqGrid的一個重要選項,用于設置如何解析從Server端發回來的json數據,如果Server返回的是xml數據,則對應的使用xmlReader來解析。jsonReader的默認值為:

          jsonReader : {

          root: "rows", // json中代表實際模型數據的入口

          page: "page", // json中代表當前頁碼的數據

          total: "total", // json中代表頁碼總數的數據

          records: "records", // json中代表數據行總數的數據

          repeatitems: true, // 如果設為false,則jqGrid在解析json時,會根據name來搜索對應的數據元素(即可以json中元素可以不按順序);而所使用的name是來自于colModel中的name設定。

          cell: "cell",

          id: "id",

          userdata: "userdata",

          subgrid: {

          root:"rows",

          repeatitems: true,

          cell:"cell"

          }

          }

          假如有下面一個json字符串:

          {"totalpages":"3","currpage":"1","totalrecords":"11","griddata":[{"SalesReasonID":"1","Name":"Price","ReasonType":"Other","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998年6月1日"}]}

          其對應的jsonReader為:jsonReader: {

          root: "griddata",

          total: "totalpages",

          page: "currpage",

          records: "totalrecords",

          repeatitems: false

          }

          注:cell、id在repeatitems為true時可以用到,即每一個記錄是由一對id和cell組合而成,即可以適用另一種json結構。援引文檔中的例子:

          repeatitems為true時:

          jQuery("#gridid").jqGrid({

          ...

          jsonReader : {

          root:"invdata",

          page: "currpage",

          total: "totalpages",

          records: "totalrecords"

          },

          ...

          });

          json結構為:

          {

          "totalpages": "xxx",

          "currpage": "yyy",

          "totalrecords": "zzz",

          "invdata" : [

          {"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, // cell中不需要各列的name,只要值就OK了,但是需要保持對應

          {"id" :"2", "cell" :["cell21", "cell22", "cell23"]},

          ...

          ]

          }

          repeatitems為false時:

          jQuery("#gridid").jqGrid({

          ...

          jsonReader : {

          root:"invdata",

          page: "currpage",

          total: "totalpages",

          records: "totalrecords",

          repeatitems: false,

          id: "0"

          },

          ...

          });

          json結構為:

          {

          "totalpages" : "xxx",

          "currpage" : "yyy",

          "totalrecords" : "zzz",

          "invdata" : [

          {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 數據中需要各列的name,但是可以不按列的順序

          {"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},

          ...

          ]

          }

          2.3 colModel的重要選項

          colModel也有許多非常重要的選項,在使用搜索、排序等方面都會用到。這里先只說說最基本的。

          • name :為Grid中的每個列設置唯一的名稱,這是一個必需選項,其中保留字包括subgrid、cb、rn。
          • index :設置排序時所使用的索引名稱,這個index名稱會作為sidx參數(prmNames中設置的)傳遞到Server。
          • label :當jqGrid的colNames選項數組為空時,為各列指定題頭。如果colNames和此項都為空時,則name選項值會成為題頭。
          • width :設置列的寬度,目前只能接受以px為單位的數值,默認為150。
          • sortable :設置該列是否可以排序,默認為true。
          • search :設置該列是否可以被列為搜索條件,默認為true。
          • resizable :設置列是否可以變更尺寸,默認為true。
          • hidden :設置此列初始化時是否為隱藏狀態,默認為false。
          • formatter :預設類型或用來格式化該列的自定義函數名。常用預設格式有:integer、date、currency、number等(具體參見文檔 )。

          三、 注意事項

          1. 動態改變Add Form或者Edit Form中的select的內容,如:改變下圖中的Comparator下拉中的內容。

          $("#list_d").navGrid('#pager_d',{add:true,edit:true,del:true,search:false,refresh:false},

          {

          checkOnSubmit:false, closeAfterEdit: true,recreateForm:true,

          beforeInitData:function(formid){

          initComparator();

          },

          beforeShowForm: function(formid){

          $("#list_d").jqGrid('setColProp', 'Name', { editrules:{required:false},});

          $('#tr_Name', formid).hide();

          }

          },//edit

          {},//add

          {}//del

          beforeInitData, beforeShowForm在每次點擊編輯的時候都會執行。initComparator的作用是通過ajax獲取數據,然后利用$("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });來設置Comparator下拉中的內容。其中valueString的格式如下’ equal to: equal to; not equal to: not equal to’。鍵值之間用冒號隔開,2項之間用分號隔開。注意:把recreateForm設為true,否則'setColProp'只在第一次調用時有效。

          2. var rowNum = parseInt($(this).getGridParam("records"), 10); 得到數據條數。

          3. jQuery("#list_d").clearGridData();清空數據。

          4. jQuery("#list").getCell(ids,"Key");獲取第ids行的key列。

          5. $("#list").jqGrid('setSelection', "1");選中第一行。放在loadComplete:中在gird加載完成的時候自動選中第一行。loadComplete:function(data){$("#list").jqGrid('setSelection', "1");

          }

          6. 對于像1中的可編輯的字段,可以設定rule,參見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules

          7. 修改Option,以URL為例

          jQuery("#list_d").jqGrid('setGridParam',{url:"xxx.aspx",page:1}).trigger('reloadGrid');

          享一款jQuery表格插件,今天我要介紹的不是DataTables,而是相對沒有那么出名的jqGrid,它基于jquery UI主題,同時也支持Bootstrap,能夠根據需求使用不同主題。兼容目前主流瀏覽器,有豐富的配置項和方法事件接口,能夠輕松應對一般的表格需求,功能強大,擴展方便,支持多語言。

          • 1、下載及引入jqGrid

            https://github.com/tonytomov/jqGrid

          下載jqGrid后,把文件存放到你項目的任意目錄中,使用時引入js、css即可,下面以引入Bootstrap樣式為例,i18n下的js為語言包,需要注意的是請務必把語言包放在jqGrid的js之前引入,以免后續出現問題。

          • 2、初始化表格

          頁面中輸入<table id="grid-table"></table><div id="grid-pager"></div>,頁面基本就這樣,然后在js中配置相關信息初始化表格。

          下圖opt的基本參數,請到api文檔查看更多配置屬性

          在opt中還有一個表格配置屬性colModel,該屬性就是我們要展示的表頭,數據等信息的配置,下圖是一個簡單的例子。

          后臺需要返回如下格式的json數據,page為當前頁數,records為總共有多少條數據,rows為數據,total為總共頁數

          最后我們配置完成后是這樣的。

          刷新頁面后大概就是下面的樣子,沒有真實姓名之后的列和導航欄中的工具按鈕。

          想要配置工具按鈕也很簡單,配置以下信息即可,內置按鈕有新增、編輯、刪除、搜索、刷新、查看按鈕,可以添加自定義按鈕,內置按鈕也可以重寫其方法,能夠方便的實現我們想要的功能。

          • 3、新增、編輯、刪除功能

          大致可以分為彈窗和內聯兩種操作,可以自己進行自定義,也可以跳轉頁面進行新增、編輯

          彈窗

          內聯

          • 4、頁腳匯總和分組

          • 5、分頁

          分頁方式有兩種,導航分頁和無限滾動分頁

          導航分頁

          無限滾動分頁

          • 6、其他

          還有很多其他的功能如多選、單選、多層次結構展示、排序、搜索過濾等。唯一的缺陷是樹形表格,目前它的樹形表格配置繁瑣,也存在比較的的問題,但也還勉強能接受,希望樹形表格在以后能夠有所改善。

          API文檔:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

          在線演示:http://www.guriddo.net/demo/bootstrap/

          、表格樹控件 jqGrid

          jqGrid 是一個用來顯示網格數據的jQuery插件,文檔比較全面。

          它的主要特點包括:

          • 基于jquery UI主題,開發者可以根據客戶要求更換不同的主題

          • 兼容目前所有流行的web瀏覽器

          • Ajax分頁,可以控制每頁顯示的記錄數

          • 支持XML,JSON,數組形式的數據源

          • 提供豐富的選項配置及方法事件接口

          • 支持表格排序,支持拖動列、隱藏列

          • 支持滾動加載數據

          • 支持實時編輯保存數據內容

          • 支持子表格及樹形表格

          主頁:http://www.trirand.com/blog/

          2、搜索補全 Bootstrap Search Suggest

          這是一個基于 bootstrap 按鈕式下拉菜單組件的搜索建議插件,必須使用于按鈕式下拉菜單組件上。

          它的主要功能包括:

          • 搜索方式:從 data.value 的有效字段數據中查詢 keyword 的出現,或字段數據包含于 keyword 中

          • 支持單關鍵字、多關鍵字的輸入搜索建議,多關鍵字可自定義分隔符

          • 支持按 data 數組數據搜索、按 URL 請求搜索和按首次請求URL數據并緩存搜索三種方式

          • 單關鍵字會設置 data-id 和輸入框內容兩個值,以 indexId/idField 和 indexKey/idFiled 取值 data 的數據為準;多關鍵字只設置輸入框值

          主頁:https://github.com/lzwme/bootstrap-suggest-plugin

          3、代碼編輯器 CodeMirror

          CodeMirror 是一個靈活的文本代碼編輯器。它是專門用于編輯代碼,并附帶一些語言模塊和插件,實現更先進的編輯功能。提供豐富的API接口和CSS主題

          它有如下特點:

          • 支持超過100種語言

          • 一個強大的,可組合的語言模式系統

          • 自動完成(XML)

          • 代碼折疊

          • 搜索和替換接口

          • 混合字體大小和樣式

          • 各種主題

          • 可以調整大小以適應內容

          • 內聯和塊部件

          • 許多擴展的方法和插件 ...


          主頁:http://codemirror.net/


          4、富文本編輯器 Simditor

          Simditor是Tower開源的所見即所得的在線富文本編輯器。它是一款十分優秀的國產富文本編輯器。Simditor的理念是保持簡單,避免過度的功能,每一個特性都追求極致的用戶體驗。同時,Simditor也很容易擴展。


          主頁:https://github.com/mycolorway/simditor


          5、旁注插件 Marginotes

          Marginotes,使用jQuery實現的添加旁注插件,快速,炫酷。


          主頁:https://github.com/fdansv/marginotes


          6、側邊欄 Slidebars

          Slidebars是一個jQuery框架,用于為你的網頁或web應用添加off-canvas菜單和側邊欄

          主頁:https://github.com/adchsm/Slidebars


          7、動畫 anime.js

          anime.js是一個靈活輕便的JavaScript動畫庫。它通過CSS,獨立變換,SVG,DOM屬性和JS對象實現。


          主頁:https://github.com/juliangarnier/anime


          8、圖像燈箱插件 Lightgallery.js

          Lightgallery.js是一個功能齊全的JavaScript圖像燈箱插件。

          他的主要特點:

          • 它使用CSS,使用唯一的方法調整大小的圖像和視頻。因此,它非常靈活的,并且比使用JavaScript方法快。

          • 它帶有內置模塊,如縮略圖,全屏,變焦等幾個很容易創建使用的模塊,還可以分離你不希望使用的模塊。

          • 它配備了眾多的選項,讓你很輕松的自定義插件。

          • 它使用硬件加速 CSS3過渡的動畫性能。


          主頁:https://github.com/sachinchoolur/lightgallery.js


          9、創建工具提示樣式的工具欄 Toolbar.Js

          Toolbar.Js可以讓你在Web應用程序和網站,快速創建工具提示風格的工具欄。

          它有如下特點:

          • 簡單的實現,簡單的選項。

          • 包括與工具欄使用一組CSS按鈕。

          • 您可以根據需要運行盡可能多的工具欄。

          • 工具欄可以連接到所需的任何元素。

          • 工具欄中的圖標很容易通過圖標庫定制。

          • 豐富的選項,讓你可以完整控制包括位置,動畫和事件等。


          主頁:http://paulkinzett.github.io/toolbar/


          10、樹插件 zTree

          zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。

          • 將核心代碼按照功能進行了分割,不需要的代碼可以不用加載

          • 采用了 延遲加載 技術,上萬節點輕松加載,即使在 IE6 下也能基本做到秒殺

          • 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器

          • 支持 JSON 數據

          • 支持靜態 和 Ajax 異步加載節點數據

          • 支持任意更換皮膚 / 自定義圖標(依靠css)

          • 支持極其靈活的 checkbox 或 radio 選擇功能

          • 提供多種事件響應回調

          • 靈活的編輯(增/刪/改/查)功能,可隨意拖拽節點,還可以多節點拖拽喲

          • 在一個頁面內可同時生成多個 Tree 實例

          • 簡單的參數配置實現 靈活多變的功能


          主頁:http://www.treejs.cn/


          這次就到這里,下次繼續,請多多關注,謝謝。


          主站蜘蛛池模板: 久久亚洲AV午夜福利精品一区| 亚洲一区二区影视| 久久久久人妻精品一区| 国产精品日韩欧美一区二区三区 | 亚洲av午夜福利精品一区人妖| 亚洲AV无码国产精品永久一区| 国产一区二区三区精品久久呦| 亚洲AV无码一区二区三区在线| 国产熟女一区二区三区四区五区 | 亚洲日韩国产欧美一区二区三区| 国产精品乱码一区二区三区| 成人区人妻精品一区二区三区 | 国产精品污WWW一区二区三区| 国产麻豆精品一区二区三区 | 国产成人精品无人区一区 | 中文字幕在线观看一区二区 | 国产在线一区二区三区| 偷拍精品视频一区二区三区| 欧洲亚洲综合一区二区三区| 亚洲福利一区二区三区| 亚洲国产精品无码久久一区二区| 国产福利电影一区二区三区,亚洲国模精品一区 | 天码av无码一区二区三区四区 | 人成精品视频三区二区一区| 成人免费视频一区二区三区| 亚洲一区二区无码偷拍| 蜜桃无码一区二区三区| 日本一区二区在线播放| 久久一区二区明星换脸| 国产一区二区在线视频| 无码人妻少妇色欲AV一区二区 | 国产成人一区二区三区在线观看| 国产成人片视频一区二区| 亚洲AV无码一区二三区 | 久久se精品一区二区影院| 久久精品国产第一区二区| 国产午夜三级一区二区三| 色老板在线视频一区二区| 波多野结衣AV无码久久一区| 国产亚洲一区二区精品| 精品无码日韩一区二区三区不卡|