Microsoft Accessのように複数列を表示できるコンボボックスを生成するjQuery Pluginを作成したので公開します。
このプラグインは一般的というより業務用に需要があるのではと思います。
特長は<table>データもしくはjsオブジェクト配列から複数列を持つSelectBoxを生成できるところ。見た目を綺麗にしてくれます。
改良の余地はアリですが、まずは公開します。
Webシステムを開発している方には面白いのでは?
Microsoft Accessのように複数列を表示できるコンボボックスを生成するjQuery Pluginを作成したので公開します。
このプラグインは一般的というより業務用に需要があるのではと思います。
特長は<table>データもしくはjsオブジェクト配列から複数列を持つSelectBoxを生成できるところ。見た目を綺麗にしてくれます。
改良の余地はアリですが、まずは公開します。
Webシステムを開発している方には面白いのでは?
テーブルにページング&ソート機能を追加するjQuery用プラグインを更新しました(ver1.1)。
更新内容は以下の通り。
特にalignを設定できるようになったので便利になったと思います。
是非利用してみて下さい。
最近、WordPressの案件を離れて生産管理のWebシステムを構築しています。
具体的にはAccess2000で納品していたシステムをWebに移管する作業です。
なるべく違和感や操作感の違いが出ないように現行システムの雰囲気を保ったまま移植しようとしているので結構大変です…。AccessにはAccessの良さがありますからね。
主にjQueryを駆使しながら色々作業をしているので、その副産物で出来たものを公開しています。それがWordPress関連よりjQueryのプラグイン関連の記事が最近多い理由です。
まぁ副産物で出来たものは会社の資産でもあるわけですがオープンソースの今の時代。当社の副産物も結局色々なサイトのソースコードを参考にしながらの二次的なものもあるわけですから、皆さんにも大いに利用してもらいたいわけです。
むしろそうやって色んなものを公開して「ISプランニング」の認知度が上がる方が会社の資産に繋がるのではないか、と。
そうは言っても、いろんなプラグインを作成するのに時間は掛かっているわけでして、もし気に入ったプラグインが見つかり、それが有益だった場合は寄付なんかしていただけると喜ぶのです。←本音
当社は最近「ポチ」という寄付が出来るサービスに登録しました。さ!さ!皆様、遠慮せずに!←本音
今後ですが、<select>の複数列バージョンのようなものをリリース予定です。
自分の作成した配列に今何が入っているのか?構成がどうなっているのか?
そういったユーザー定義の配列やオブジェクトの中身が知りたい事がよくあります。
PHPには「print_r」関数があります。
この関数を使うと配列、連想配列、オブジェクトを分かりやすく展開表示してくれます。
この便利なprint_rをJavaScriptにも欲しい!という事で、なるべくprint_rと同じ使用感になるように作成しました。表示の見た目にこだわっていますので、違和感なく使用できると思います。
jQuery用のプラグインとして作成しているので読み込み後は、「$.print_r(array)」という感じで使用できます。便利だと思いますので是非ご利用してみてください。
<table>にソート機能とページング機能を追加するプラグインを作成しました。
まぁ探せばいくらでも高機能なものがあるのですが、「これが欲しい!」という要望を全て満たしているものが無かったので自作してみました。
具体的な機能は、
とりあえず自分の要件は満たしたのでついでに公開しておきます。
尚、IE6は非対応です。
これは取引先の管理システムに導入するので、ある程度ブラウザを限定できる為、わざわざIE6用のスクリプトは書かなかったが故です。
宜しければ使用してみてください。
jQueryプラグインの「Flexigrid」を使用したのですが、テーブルのフォーマットをこれでもかというぐらい見事にしてくれます。
これで充分なのですが、行をクリック(ダブルクリック)した時に処理をしたい時があると思います。というより私がそうしたい処理があったので調べてみました。
基本的にはコアファイルを弄るのは良くないと思うので、後から独自でクリック処理を追加してやるのが王道だと思います。
ただ調べている中で、コアファイルを改造してそういう処理を埋め込むやり方が書かれていたので今回はそれを参考にクリック処理を追加してみました。(flexigridのバージョンは1.1です。)
参照URL :
http://groups.google.com/group/flexigrid/browse_thread/thread/8b068601cb659c49/723605f2911b1b71
http://groups.google.com/group/flexigrid/browse_thread/thread/3b6817e91684b8e8/f877eee4f5e9f037
まずは初期設定の登録。
[js]
// ほぼ最初の行の箇所
$.addFlex = function (t, p) {
・・・
onSuccess: false,
onError: false,
onSubmit: false, //using a custom populate function
onRowClick: false, // ←クリックイベントハンドラ 追加
onDblClick: false // ←ダブルクリックイベントハンドラ 追加
}, p);
[/js]
次に行クリック時、ダブルクリック時の箇所にイベントハンドラの登録を追加します。
[js]
// v1.1の場合、650行目あたり
addRowProp: function () {
$(‘tbody tr’, g.bDiv).each(function () {
$(this).click(function (e) {
var obj = (e.target || e.srcElement);
if (obj.href || obj.type) return true;
$(this).toggleClass(‘trSelected’);
if (p.singleSelect) $(this).siblings().removeClass(‘trSelected’);
// ここから追加
if (p.onRowClick) {
var json;
var tds = $(this).find(‘td’);
json = ‘{"rowid":"’ + $(this).attr(‘id’) + ‘",’;
for (var i = 0; i < p.colModel.length; i++) {
json += ‘"’ + p.colModel[i].name + ‘":"’ + $(tds[i]).text() + ‘"’;
if ((i + 1) != p.colModel.length) json += ‘,’;
}
json += ‘}’;
data = $.parseJSON(json);
p.onRowClick($(this), data);
}
// ここまで追加
}).mousedown(function (e) {
・・・
}, function () {}).dblclick(function() { // ダブルクリックイベント自体が無いので、イベントを追加
if (p.onDblClick) {
// 処理はクリック時と同じ
・・・
p.onDblClick($(this), data); // 最後は違います
}
});
[/js]
これでクリックイベントとダブルクリックイベントが追加されます。
もちろんどちらか一方だけでも構いません。(当たり前の話ですが)
後はいつものように使えば良いです。
[js]
jQuery("#table1").flexigrid({
url: ‘data.php’,
dataType: ‘json’,
colModel : [
{display: ‘ISO’, name : ‘iso’, width : 40, sortable : true, align: ‘center’},
{display: ‘Name’, name : ‘name’, width : 180, sortable : true, align: ‘left’},
],
・・・
useRp: true,
rp: 15,
onRowClick: function(row, data) { // クリックイベント処理
alert(data.iso);
}
});
[/js]
使い勝手は良くなりますが、コアファイルの改造ですのでバージョンアップされた場合などで面倒くさい事になると思います。なので割り切りが必要だと思います。