これはなに?

動作環境の設定

基本的な使い方

[source] [reload]

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jqgrid exam</title>
    <link rel="stylesheet" type="text/css" media="screen" href="jqgrid-4.5.4/css/ui.jqgrid.css">
    <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.10.3/jquery-ui.min.css">
    <style type="text/css">
    </style>
</head>

<body>
    <table id="myTbl"></table>
    <div id="myPager"></div><br>
    <button>Shipment</button>

<script src="jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="jqgrid-4.5.4/js/i18n/grid.locale-ja.js" type="text/javascript"></script>
<script src="jqgrid-4.5.4/js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var contents = [
  {id:1, customer:'田中一郎', date:1385000000000, item:'ピタゴラスイッチ', unit_price:1450, amount:2, total_price:2900},  
  {id:2, customer:'田中一郎', date:1385000000000, item:'つるぴかLED', unit_price:50, amount:30, total_price:1500},
  {id:3, customer:'佐藤二郎', date:1380000000000, item:'がっつりコンデンサ', unit_price:100, amount:5, total_price:500},
  {id:4, customer:'山田花子', date:1390000000000, item:'満タン電池', unit_price:200, amount:12, total_price:2400},
];

$(document).ready(function() {
    init();
    
    $('button').on('click', function() {
        var tbl = $("#myTbl");
        var rowIds = tbl.getGridParam('selarrrow');
        if (0 === rowIds.length) {
            alert('選択されていません');
            return;
        }
        
        var orderIds = new Array();
        for (var idx = 0; idx < rowIds.length; idx++) {
            var row = tbl.getRowData(rowIds[idx]);
            orderIds.push(row.id);
        }
        alert('受注番号' + orderIds + 'を出荷します');
        
        // 実アプリではここで ajax なんかを呼び出して、出荷処理と未出荷の受注一覧の取得を行う
        var data = new Array();
        for (var idx = 0; idx < contents.length; idx++) {
            if (orderIds.indexOf("" + contents[idx].id) < 0) {
                data.push(contents[idx]);
            }
        }
        contents = data;
        // 実アプリではここで ajax なんかを呼び出す
        
        tbl
        .jqGrid('clearGridData')
        .jqGrid('setGridParam', { data: data })
        .trigger('reloadGrid', [{ page: 1}]);
    });
});

function init() {
    var tbl = $("#myTbl");
    tbl.jqGrid({
        data: contents,
        datatype: "local",
        colNames: ['注文番号','顧客名','受注日','品目','単価','個数','合計金額'],
        colModel: [
            { name: 'id'       , index: 'id'       , width: 40  , align: 'center', classes: 'tbl_id_class'},
            { name: 'customer' , index: 'customer' , width: 50 , align: 'center', classes: 'tbl_txt_class'},
            { name: 'date'     , index: 'date'     , width: 100 , align: 'center', classes: 'tbl_txt_class',
                formatter: function (cellValue, option) {
                    if (!cellValue) {
                        return "-";
                    }
                    var date = new Date(cellValue);
                    return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
                }                    
            },
            { name: 'item'        , index: 'item'        , width: 100, align: 'center', classes: 'tbl_txt_class'},
            { name: 'unit_price'  , index: 'unit_price'  , width: 40, align: 'right' , classes: 'tbl_num_class'},
            { name: 'amount'      , index: 'amount'      , width: 40, align: 'right' , classes: 'tbl_num_class'},
            { name: 'total_price' , index: 'total_price' , width: 40, align: 'right' , classes: 'tbl_num_class'},
        ],
        rowNum: 10, // デフォルトの 行/ページ
        rowList: [10, 20, 50], // 行/ページ セレクトボックスの候補
        caption: "Orders", // 表タイトル
        height: 200,
        width: 600,
        shrinkToFit: true, // 画面サイズに合わせて表の大きさを変える
        pager: 'myPager',  // Pager の id
        viewrecords: true, // 行数を pager の右下に表示する。
        multiselect: true, // 左側にチェックボックスを作成
    });
}
/* ==================== SCRIPTS ==================== */
</script>
</body>
</html>

ラジオボタン付きの単一選択画面の作り方

[source] [reload]

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jqgrid exam</title>
    <link rel="stylesheet" type="text/css" media="screen" href="jqgrid-4.5.4/css/ui.jqgrid.css">
    <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.10.3/jquery-ui.min.css">
    <style type="text/css">
    </style>
</head>

<body>
    <table id="myTbl"></table>
    <div id="myPager"></div><br>
    <button>Shipment</button>

<script src="jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="jqgrid-4.5.4/js/i18n/grid.locale-ja.js" type="text/javascript"></script>
<script src="jqgrid-4.5.4/js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var contents = [
  {id:1, customer:'田中一郎', date:1385000000000, item:'ピタゴラスイッチ', unit_price:1450, amount:2, total_price:2900},  
  {id:2, customer:'田中一郎', date:1385000000000, item:'つるぴかLED', unit_price:50, amount:30, total_price:1500},
  {id:3, customer:'佐藤二郎', date:1380000000000, item:'がっつりコンデンサ', unit_price:100, amount:5, total_price:500},
  {id:4, customer:'山田花子', date:1390000000000, item:'満タン電池', unit_price:200, amount:12, total_price:2400},
];

$(document).ready(function() {
    init();
    
    $('button').on('click', function() {
        var tbl = $("#myTbl");
        var rowId = tbl.getGridParam('selrow');
        if (!rowId) {
            alert('選択されていません');
            return;
        }
        
        var row = tbl.getRowData(rowId);
        alert('受注番号' + row.id + 'を出荷します');
        
        // 実アプリではここで ajax なんかを呼び出して、出荷処理と未出荷の受注一覧の取得を行う
        var data = new Array();
        for (var idx = 0; idx < contents.length; idx++) {
            if (row.id != contents[idx].id) {
                data.push(contents[idx]);
            }
        }
        contents = data;
        // 実アプリではここで ajax なんかを呼び出す
        
        tbl
        .jqGrid('clearGridData')
        .jqGrid('setGridParam', { data: data })
        .trigger('reloadGrid', [{ page: 1}]);
    });
});

function init() {
    var tbl = $("#myTbl");
    tbl.jqGrid({
        data: contents,
        datatype: "local",
        colNames: ['','注文番号','顧客名','受注日','品目','単価','個数','合計金額'],
        colModel: [
            { name: 'select' , index: 'select', width: 20, align: 'center', resizable: false, sortable: false,
                formatter: function (cellValue, option) {
                    return '<input type="radio" name="radio_' + option.gid + '" onclick=\"selectRow(this);\"/>';
                }
            },
            { name: 'id'       , index: 'id'       , width: 40  , align: 'center', classes: 'tbl_id_class'},
            { name: 'customer' , index: 'customer' , width: 50 , align: 'center', classes: 'tbl_txt_class'},
            { name: 'date'     , index: 'date'     , width: 100 , align: 'center', classes: 'tbl_txt_class',
                formatter: function (cellValue, option) {
                    if (!cellValue) {
                        return "-";
                    }
                    var date = new Date(cellValue);
                    return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
                }                    
            },
            { name: 'item'        , index: 'item'        , width: 100, align: 'center', classes: 'tbl_txt_class'},
            { name: 'unit_price'  , index: 'unit_price'  , width: 40, align: 'right' , classes: 'tbl_num_class'},
            { name: 'amount'      , index: 'amount'      , width: 40, align: 'right' , classes: 'tbl_num_class'},
            { name: 'total_price' , index: 'total_price' , width: 40, align: 'right' , classes: 'tbl_num_class'},
        ],
        beforeSelectRow: function (rowid, e) {
            // 選択行のラジオボタンを選択状態にする
            var $radio = $(e.target).closest('tr').find('input[type="radio"]');
            $radio.prop("checked", true);
            return true; // allow row selection
        },        
        rowNum: 10, // デフォルトの 行/ページ
        rowList: [10, 20, 50], // 行/ページ セレクトボックスの候補
        caption: "Orders", // 表タイトル
        height: 200,
        width: 600,
        shrinkToFit: true, // 画面サイズに合わせて表の大きさを変える
        pager: 'myPager',  // Pager の id
        viewrecords: true, // 行数を pager の右下に表示する。
        multiselect: false, // 左側にチェックボックスを作成
    });
}

function selectRow(radio) {
    // クリックしたラジオボタンの行を選択状態にする
    var rowid = $(radio).closest('tr').attr('id');
    console.log(rowid);
    
    var tbl = $("#myTbl");
    tbl.jqGrid('setSelection', rowid);
}
/* ==================== SCRIPTS ==================== */
</script>
</body>
</html>

HTML#Javascript


添付ファイル: filejqtable2.html 6046件 [詳細] filejqtable1.html 6057件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2013-11-02 (土) 01:05:47 (1127d)
ISBN10
ISBN13
9784061426061