EasyUI dbgrid 也就是表格 table 處理 心得

在MVC的VIEW 我本來是 用 @Scripts.Render("~/bundles/easyui")
帶進來
後來發現 有時 OK 有時不行
還是乖乖地用一般的方式 <script src="~/_JEui/jquery.easyui.min.js"></script>
比較不會有奇怪問題

布局參考 http://www.jeasyui.com/documentation/layout.php
表格 長寬 用 style 設 不要填在
表格操作: http://www.easyui.info/archives/204.html

一開始就填上資料的方式
是 <table id="tt" style="width:700px;height:auto" title="DataGrid" idField="itemid" url="自己的Ajax">
或是用

1. $('#test').datagrid({   
2.     url:'自己的Ajax'   
3. });  

自己的Ajax 回傳 JSON 更新

但這邊我想動態下載填上資料 而不是一開始就填上資料
這是另一種
是用 AJAX call 再更新
 $.post("自己的Ajax", {})
              .done(function (Rdata) {
                  $('#tt').datagrid('loadData', { 'rows': Rdata });
              });
自己的Ajax 的寫法是 造一個 class 然後用 list<class> 塞好資料後回傳
class 內部 變數名稱 跟table 內的 id 名稱對應就好

Html:
<table id="tt" class="easyui-datagrid" style="width:100%;" data-options="singleSelect:false,  selectOnCheck: true,checkOnSelect: true">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true" id="allCheck"></th>
                <th data-options="field:'id'" style="width:30%;">帳號</th>
                <th data-options="field:'name'" style="width:30%;">名稱</th>
            </tr>
        </thead>

    </table>
這個是 加入 checkbox 並可多選 (全選或全取消) 的方法

javascript:

讀取被選item 的方式
 var checkedItems = $('#tt').datagrid('getChecked');
            var names = [];
            $.each(checkedItems, function (index, item) {
                names.push(item.id);

            });

有一個被選時的觸發方式:
$("#agT").datagrid({ onClickRow: myrow });
 function myrow(index, row)
        {
            selrow = row;
            if (row) {
               alert(row.id);
            }

        }

基本這樣就可用在很多地方了