jqGrid共通API
Jqgrid Common Api
基本設定
最初に公式JSパッケージを紹介します -リンクアドレス- これはjqueryのプラグインであるため、最初に公式のjqueryパッケージを導入する必要があります。
<script src='../../lib/jq/jquery-1.11.3.min.js' type='text/javascript'>script> <script src='../../lib/jqgrid/grid.locale-cn.js' type='text/javascript'>script> <script src='../../lib/jqgrid/jquery.jqGrid.min.js' type='text/javascript'>script>テーブルにリモートデータを入力します
リクエストインターフェースから返されたJSONをフォームに入力します
$(function(){ $('#jqGrid').jqGrid({ url: '../sys/menu/list', //ajax load data datatype: 'json', // colNames:['name','age','sex','salary'], //manually set the header, which can be set by the label below colModel: [ { label: 'Name', name: 'name', index: 'name', width: 50 }, { label: 'age', name: 'age', index: 'age', width: 50}, { label: 'gender', name: 'gender', index: 'gender', width: 50}, { label: 'wage', name: 'salary', index: 'salary', width: 50}, { label: 'Generation', name: 'level', index: 'level', width: 50, // Format function formatter: function(cellValue,options,rowObject){ console.log(cellValue,options,rowObject) if(cellValue == 'elder'){ return ' '+cellValue+' ' }else{ return cellValue } }}, { label: 'Wage Grade', name: 'type', index: 'type', width: 50} ], width:'100%', viewrecords: true,//Define whether to display the total number of records height: 300,//Table height rowNum: 10,//Rows rowList : [10,30,50],//The number of rows switch option value rownumbers: true, //If it is true, a new column will be added to the left of the table, showing the row number rownumWidth: 25, //If rownumbers is true, you can set the width of the column autowidth:true,//Automatic width multiselect: true,//Define whether multiple selections are possible pager: '#jqGridPager',//The id of the bottom page bar in html // The json object returned in the background is page, so page.xxx is used here jsonReader : { root: 'page.list', page: 'page.currPage', total: 'page.totalPage', records: 'page.totalCount' }, prmNames : { page:'page', rows:'limit', order: 'order' }, // The method after the form is filled gridComplete:function(){ //Hide the scroll bar at the bottom of the grid $('#jqGrid').closest('.ui-jqgrid-bdiv').css({ 'overflow-x' : 'hidden' }) } })ローカルJSONデータをロードする
独自のAjaxでロードされたデータを使用してテーブルを埋める場合は、この方法を使用できます
$(function(){ $('#jqGrid').jqGrid({ // url:'../sys/menu/list', //Do not want to use grid's ajax to comment out the code datatype: 'json', // colNames:['name','age','sex','salary'], //set the header manually, which can be set by the label below colModel: [ { label: 'Name', name: 'name', index: 'name', width: 50 }, { label: 'age', name: 'age', index: 'age', width: 50}, { label: 'gender', name: 'gender', index: 'gender', width: 50}, { label: 'wage', name: 'salary', index: 'salary', width: 50}, { label: 'Generation', name: .... The omission of the latter remains consistent with the above直接割り当て
$('#jqGrid')[0].addJSONData(r) //The json object in r must be consistent with page.xxx configured with the initialization parameters above //For example, the json defined above is page.xxx, then the custom ajax returns page{xxx:[],xxx{}}トラバーサル割り当て
//Assuming that the returned json is a list collection in r for (let k in r.list) { $('#jqGrid').jqGrid('addRowData',k,rows[k])//Assign a value to the specified row }一般的な方法
チェックされたすべての行を取得します
選択した単一行を取得します
// Get the id of the selected row, single point to a row, if multiple rows are selected, the last row is returned let rowId = $('#jqGrid').jqGrid('getGridParam','selrow') console.log(rowId)//Unchecked is null let row = $('#jqGrid').jqGrid('getRowData',k)//Get the row object console.log(row)選択したすべての行を取得します
// Get the id of all selected rows let rowIds = $('#jqGrid').jqGrid('getGridParam','selarrrow') console.log(rowIds)//Unchecked is an empty array // Get the object of the selected row for (let k in rowIds) { let row = $('#jqGrid').jqGrid('getRowData',k) console.log(row) }指定したセルに入力します
//Parameter 1: fixed //Parameter 2: The id of the row of the cell //Parameter 3: Fill in the value of the cell //Parameter 4: Fill in the cell's name field value $('#jqGrid').jqGrid('setCell',i,k,enums[k2].name)すべての行を取得
公式の方法には、最後の行を取得できないBUGがあります
公式の方法は次のとおりです。
let rs = $('#jqGrid').jqGrid('getRowData') //This way will always get the last line less別の方法で入手できます
let rows = [] let ids = $('#jqGrid').jqGrid('getDataIDs')//Get all rowId console.log(ids) for(let i= 0 i let row = $('#jqGrid').jqGrid('getRowData',ids[i]) console.log(row) rows.push(row) // Stored in row array } console.log(rows) テーブルのリロード
指定された場所にあるテーブルのデータをリロードする必要がある場合、オフィシャルはメソッドを提供します
$('#jqGrid').jqGrid('setGridParam',{ postData : { name : vm.q.name, page:page }, /*ajaxGridOptions: {//Change the ajax setting parameters through this setting type:'post', async:false }*/ }).trigger('reloadGrid')ajax設定を変更する
jqGridのデフォルトのajax設定を変更したいのですが、公式が方法を提供していますが、必要なバージョンは3.6でなければなりません
$('#jqGrid').jqGrid({ url: '../tpoorsmemberinfo/list', ajaxGridOptions : { //Change the ajax setting parameters through this setting type:'get', async : true }, ...要求されたパラメーターの値を変更します
バックグラウンドへの各ajaxリクエストの前に独自のカスタム値を追加したい
$('#jqGrid').jqGrid({ url: '../tpoorsmemberinfo/list', serializeGridData : function(postdata) { console.log('postdata',postdata) //Use the selector to get the postData object console.log('postData : ',$('#jqGrid').jqGrid()[0].p.postData) console.log('this : ',this ) //Is the DOM object of the current table postdata.page = 1 postdata.limit = 10 return postdata }, ...総括する
これが私が使ったいくつかの方法の要約です。その他の方法については、詳細に説明されている公式文書を参照してください。