jquery easyui DataGrid 學習記錄

jquery easyui DataGrid

Easyui Demo網站:

http://www.jeasyui.com/  英文

http://www.phptogether.com/juidoc/  中文

datagrip的基本屬性方法:http://www.phptogether.com/juidoc/datagrid.html


凍結列 (2013-01-17 )

複製代碼
$('#tbList').datagrid({ pagination: true,
            frozenColumns: [[
            { field: 'BId',checkbox:'true',width:30},
            { field: 'BNo', title: '牌號', width: 100 },
            { field: 'FNo', title: '班號', width: 100 }
          ]], 
       fitColumns:false //禁止自適應寬度、可以水平滾動
        });
複製代碼

去掉分頁(2013-02-20)

$('#tbList').datagrid({pagination: true});

更改爲

$('#tbList').datagrid();

$('#tbList').datagrid({pagination: false});

注意:同時需要設置table的高度,而且不能爲auto

複選框以及單選(2013-02-20)

複製代碼
<table id="tbList" style="height: 330px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" 
checkbox="true"  idfield="Id" url="@Url.Action("ListData")">
<thead>
       <tr>
        <th field="Id" checkbox="true" width="150">
         </th>
    </tr>
</thead>
</table>
複製代碼

變爲單選(添加singleSelect="true"  )

<table id="tbList" style="height: 330px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" singleSelect="true" checkbox="true"  idfield="Id" url="@Url.Action("ListData")">

加載數據後默認全選:

 $(document).ready(function () {
        $('#tbList').datagrid({ 
            onLoadSuccess: function (data) {
                $('#tbList').datagrid('selectAll');
            } 
        });

獲取行數(2013-02-20)

$('#tbList').datagrid("getRows").length;

隱藏列(2013-02-20)

<th field="Dept" width="100" hidden="true">名稱</th>

 清空原有數據(2013-02-20)

方法1:

            var item = $('#filegrid').datagrid('getRows');
            if (item) {
                for (var i = item.length - 1; i >= 0; i--) {
                    var index = $('#filegrid').datagrid('getRowIndex', item[i]);
                    $('#filegrid').datagrid('deleteRow', index);
                }
            }

方法2:(測試過)

$('#filegrid').datagrid('loadData', { total: 0, rows: [] });

解析:loadData:載入本地數據,舊記錄將被移除。

事件(2013-02-20):

 $('#tbList').datagrid({ onClickRow: function () {//代碼  } });

datagrip單擊行的時候,將單選按鈕設置爲選中(2013-02-20):

複製代碼
<script type="text/javascript">
    var List = {};
    List.RadioFormatter = function (value, rec, index) {
        return "<input id='radio_id' name='radio_name' type='radio' value='" + rec.Id + "'/>";
    };

 $(document).ready( function(){ //呈現列表數據
  $('#tbList').datagrid({ onClickRow:
            function () {
                //單擊行的時候,將單選按鈕設置爲選中
                var id = $('#tbList').datagrid("getSelected");
                $("input[name='name']").each(function () {
                    if ($(this).val() == id.Id) {
                        $(this).attr("checked", true);
                    }
                });
            }
        });
});
</script>
<table id="tbList" style="height: 300px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
         singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
            <thead>
                <tr>
                    <th field="Id" width="30" formatter="PickupList.RadioFormatter">
                    </th>
                </tr>
            </thead>
        </table>
複製代碼

table中td的時間格式問題(2013-03-14)

1.頁面

 <th field="Test" formatter="Common.TimeFormatter" width="50" ></th>

2.js

複製代碼
var Common = {
    //EasyUI用DataGrid用日期格式化
    TimeFormatter: function (value, rec, index) {
        if (value == undefined) {
            return "";
        }
        /*json格式時間轉js時間格式*/
        value = value.substr(1, value.length - 2);
        var obj = eval('(' + "{Date: new " + value + "}" + ')');
        var dateValue = obj["Date"];
        if (dateValue.getFullYear() < 1900) {
            return "";
        }
        var val = dateValue.format("yyyy-mm-dd HH:MM");//控制格式
        return val.substr(11, 5);
    }

};
複製代碼

table中td內容太長自動換行(2013-03-18)

 添加屬性 nowrap="false"

 

行和複選框的分離(2013-03-25)

checkOnSelect="false" selectOnCheck="false"

注意:當使用$("#tbList").datagrid("getSelections");時候,只有行被選中,才能取到該行。一般情況,選中行時候,行爲黃色背景。

  eg.<table checkOnSelect="false"> </table>

複製代碼
var selected = $("#tbList").datagrid("getSelections");
        if (selected.length == 0) {
            alert("請選擇!");
            return;
        }

        var idString = "";
        $.each(selected, function (index, item) {
            idString += item.Id + ",";
        });
複製代碼

 設置數據列表的樣式

複製代碼
 $(document).ready(function () {
        //呈現列表數據
        $('#tbList').datagrid({ pagination: true,
            rowStyler: function(index,row){
                    if (row.ID< 10) {//那麼數據的id字段小於10的,將顯示爲灰色字體
                        return 'color:#999;';//和一般的樣式寫法一樣
                    }
                }
            });
    });
複製代碼
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章