【jQueryプラグイン】Flexigridまとめ

<script>
$(document).ready(function(){
  $('#grid').flexigrid();
});
</script>

<table id="grid">
<thead>
  <tr><th>カラム1</th><th>カラム2</th></tr>
</thead>
<tbody>
  <tr><td>レコード1-1</td><td>レコード2-1</td></tr>
  <tr><td>レコード1-2</td><td>レコード2-2</td></tr>
  <tr><td>レコード1-3</td><td>レコード2-3</td></tr>
</tbody>
</table>

26行目　rp:10,
27行目　rpOptions:[10,20,30],
30行目　pagetext:'ページ',
31行目　outof:'ページ中',
32行目　params:[],

params:[
　{name:'id', value:'nakadalog'},
　{name:'password', value:'12345'}
]

39行目　buttons:[
40行目  　{name:'編集', bclass:'edit', onpress:edit_function},
41行目  　{separator:true},
42行目  　{name:'削除', bclass:'del', onpress:del_function},
43行目  　{separator:true}
44行目  ],

63行目　// buttons edit onpress
64行目　function edit_function(){
65行目　    alert('edit_function');
66行目　    $('#grid').flexReload();
67行目　}

69行目　// buttons del onpress
70行目　function del_function(){
71行目　    alert('del_function');
72行目　    $('#grid').flexReload();
73行目　}

45行目　searchitems:[
46行目　　{display:'カラム1', name:'col1'},
47行目　　{display:'カラム2', name:'col2', isdefault:true}
48行目　],

50行目　url:'./index.php',
51行目　dataType:'json',
52行目　colModel:[
53行目　　{display:'連番', name:'no', width:20, sortable:true, align:'center'},
54行目　　{display:'カラム1', name:'col1', width:150, sortable:true, align:'left'},
55行目　　{display:'カラム2', name:'col2', width:200, sortable:true, align:'left'},
56行目　　{display:'カラム3', name:'col3', width:300, sortable:false, align:'left', hide:true},
57行目　　{display:'カラム4', name:'col4', width:50, sortable:false, align:'center'}
585行目　],

2行目　//var_dump($_POST);

 4行目　// 基本的なpostパラメーター
 5行目　$page = $_POST['page'];
 6行目　$rp = $_POST['rp'];
 7行目　$sortname = $_POST['sortname'];
 8行目　$sortorder = $_POST['sortorder'];
 9行目　$query = $_POST['query'];
10行目　$qtype = $_POST['qtype'];

12行目　// データ作成ループ範囲
13行目　$startRec = $rp * ($page - 1);
14行目　$endRec = ($rp * $page) - 1;

16行目　$res = [];

18行目　// レスポンスデータ（テーブル）
19行目　$res['page'] = $page;
20行目　$res['total'] = 30;

22行目　// レスポンスデータ（レコード）
23行目　$res['rows'] = [];

24行目　for($i = $startRec; $i <= $endRec; $i++){
25行目　    $no = $i + 1;
26行目　    $res['rows'][] = [
27行目　        'cell' => [
28行目　            $no,
29行目　            sprintf('col1データ%d', $no),
30行目　            sprintf('col2データ%d', $no),
31行目　            sprintf('col3データ%d', $no),
32行目　            sprintf('<input type="checkbox" name="rec%s">',$no),
33行目　        ]
34行目　    ];
35行目　}

$res = array(
    'page' => ページ数,
    'total' => 総行数,
    'rows' => array(
        array('cell' => array(1行目のデータ～)),
        array('cell' => array(2行目のデータ～)),
        array('cell' => array(3行目のデータ～)),
    )
);

60行目　header("Content-Type:application/json");
61行目　echo json_encode($res);
62行目　exit;

var html = ' <div class="pGroup"> <div class="pFirst pButton"><span></span></div><div class="pPrev pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"><span class="pcontrol">' + p.pagetext + ' <input type="text" size="4" value="1" /> ' + p.outof + ' <span> 1 </span></span></div> <div class="btnseparator"></div> <div class="pGroup"> <div class="pNext pButton"><span></span></div><div class="pLast pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"> <div class="pReload pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"><span class="pPageStat"></span></div>';
↓
var html = ' <div class="pGroup"> <div class="pFirst pButton"><span></span></div><div class="pPrev pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"><span class="pcontrol"><span> 1 </span> ' + p.outof + ' <input type="text" size="4" value="1" />' + p.pagetext + '</span></div> <div class="btnseparator"></div> <div class="pGroup"> <div class="pNext pButton"><span></span></div><div class="pLast pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"> <div class="pReload pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"><span class="pPageStat"></span></div>';

" <select name='qtype'>" + sopt + "</select></div>");
↓
" <select name='qtype'>" + sopt + "</select> <input type='button' value='Clear' /></div>");

.flexigrid div.fbutton .add {
	background: url(images/add.png) no-repeat center left;
}
.flexigrid div.fbutton .delete {
    background: url(images/close.png) no-repeat center left;
}

if (btn.bclass) $('span', btnDiv).addClass(btn.bclass).css({
	paddingLeft: 20
});
if (btn.bimage) // if bimage defined, use its string as an image url for this buttons style (RS)
	$('span',btnDiv).css( 'background', 'url('+btn.bimage+') no-repeat center left' );
	$('span',btnDiv).css( 'paddingLeft', 20 );
↓
//if (btn.bclass) $('span', btnDiv).addClass(btn.bclass).css({
//	paddingLeft: 20
//});
if (btn.bimage) // if bimage defined, use its string as an image url for this buttons style (RS)
	$('span',btnDiv).css( 'background', 'url('+btn.bimage+') no-repeat center left' );
//	$('span',btnDiv).css( 'paddingLeft', 20 );