jqgrid動的列と動的に生成されたcolModelcolNames(サポートタブ)



Jqgrid Dynamic Column



詳細を見るコード: jqgrid動的列と動的に生成されたcolModelcolNames

練習前は、jqgridの性質に関する身元調査データではなく、問い合わせが行われているため、jqgrid自身のページが機能していません。ページングを要求する必要がない前に、動的に列を生成する必要があるため、見つかりませんでした。この問題、投稿で友達に尋ねる適切な方法、私は気づきました。



今のところ、私が考えることができる2つの解決策があります。

まず、トラブルが多すぎますが、クエリで1回だけ勝ちます。 2番目の推奨事項



sql:

select userid 'user ID', username 'user nicknames', password 'password' from table

データが受信されたと仮定しました:

var jqdata=[ { 'Userid': 01, 'username': 'shrimp Phi', 'password': 'biubiubiu'}, { 'Userid': 02, 'username': 'geoduck', 'password': 'boomboomboom'} ]

jqgrid初期化コード:



function pageInit(){ var jqdata = [{ 'userid': 01, 'username': 'shrimp Phi', 'password': 'Dynamic biubiubiu'}, { 'userid': 02, 'username': 'geoduck', 'password ':' dynamic boomboomboom '}] var names=[] var model=[] // here since the same data source array configuration not empty, traversing the index data directly to the 0 $.each(jqdata[0], function(key,value) { names.push(key) model.push({ name:key, index:key, width:100 }) }) // Create components jqGrid jQuery('#list2').jqGrid( { datatype: 'json', // request type of the returned data. Optional json, xml, txt colNames: names, // jqGrid column displays the name colModel : model, rowNum: 10, // a show how many rowList: [10, 20, 30], // the user selects a display for how many pager: '# pager2', // table footer placeholder (usually div) of id sortname: 'id', // initialization of the sort of field sortorder: 'desc', // Sort, optional desc, asc mtype: 'post', // ajax request data to the background type. Optional post, get viewrecords : true, Title name 'JSON Example' // table: caption }) // The jqdata value added to the circulation jqGrid // here only the first N data assignment, the data amount is determined according to the option rownum for (var i = 0 i <10 i++) { jQuery('#list2').jqGrid('addRowData', i + 1, jqdata[i]) } }

しかし、深刻な欠点があり、カスタムjqgridを書き直す方法があり、jqgrid urlがないため、URLを見つけるために.trigger( 'reloadGrid')メソッドを使用する必要があります。

$('#list2').migrid({ url:'wwww.xxxxxxxxxx.com?value=ssss' }).trigger('reloadGrid')

言葉遣い、重い作業負荷、リソースの節約、そして哀れな、無意味な描画は、突然考えただけです。 。 。私を叱らないで

次に、データベースクエリを2回実行します。最初は構造を適用し、2回目はデータを取得します。

ページング操作にウィンドウ関数を使用するjqgridは、データページに設定できます。最初は最初のページを取得します(データがない場合は、ユーザー自身が判断します)。

select * from(select ROW_NUMBER()over(order by col ) * from table where 1=1 ) e where RowNumber between (page-1)*rows+1 and page*rows

実質的に上記の文型、ページはページ番号、ページあたりのデータ量の行であるため、jqgridが最初の行のデータの最初のページを送信する、つまりアナログが再利用されるため最初のデータフェッチをシミュレートすることしかできません着信パラメータ構造が同じになるため、jqgridコード。

データを返す

var jqdata=[ { 'Userid': 01, 'username': 'shrimp Phi', 'password': 'biubiubiu'} ]

列の構造を取得するためのデータ主体、次にjqgridの初期化、構成URL、jqgridはページング情報を含む要求を自動的に送信し、その後の通常の操作も同じです。

function pageInit(){ var jqdata = [{ 'userid': 01, 'username': 'shrimp Phi', 'password': 'Dynamic biubiubiu'}, { 'userid': 02, 'username': 'geoduck', 'password ':' dynamic boomboomboom '}] var names=[] var model=[] // here since the same data source array configuration not empty, traversing the index data directly to the 0 $.each(jqdata[0], function(key,value) { names.push(key) model.push({ name:key, index:key, width:100 }) }) // Create components jqGrid jQuery('#list2').jqGrid( { url:'www.xxxxx.com?value=sssss', datatype: 'json', // request type of the returned data. Optional json, xml, txt colNames: names, // jqGrid column displays the name colModel : model, rowNum: 10, // a show how many rowList: [10, 20, 30], // the user selects a display for how many pager: '# pager2', // table footer placeholder (usually div) of id sortname: 'id', // initialization of the sort of field sortorder: 'desc', // Sort, optional desc, asc mtype: 'post', // ajax request data to the background type. Optional post, get viewrecords : true, Title name 'JSON Example' // table: caption }) }

友達のより良いアイデアを得る適切な方法が以下のコメントを歓迎した場合