Jquery Easy UI初步學習(二)datagrid的使用

第一篇學的是做一個管理的外框，接着就是數據datagrid綁定了，這里我用asp.net mvc3來做的，主要就是熟悉屬性、方法。

打開easyui的demo 就可以看到如下一段代碼：

和上篇一樣class="easyui-datagrid", data-options="..."，這是一樣的,其他我在網上查了查，並做了整理

DataGrid 屬性

參數名	類型	描述	默認值
title	string	Datagrid面板的標題	null
iconCls	string	在面板上通過一個CSS類顯示16x16圖標。	null
border	boolean	設置面板是否具有邊框	TRUE
width	number	datagrid面板的寬度	auto
height	number	datagrid面板的高度	auto
columns	array	DataGrid列配置對象	null
frozenColumns	array	凍結的列，被現實在左邊	null
striped	boolean	設置是否讓單元格顯示條紋。默認false。	FALSE
method	string	通過該方法類型請求遠程數據。默認post。	post
nowrap	boolean	是否包裹數據，默認為包裹數據顯示在一行	TRUE
idField	string	標識字段，或者說主鍵字段	null
url	string	請求數據的URL.(josn格式)	null
loadMsg	string	加載數據時顯示的信息	Processing, please wait …
pagination	boolean	是否顯示分頁工具欄	FALSE
rownumbers	boolean	是否顯示行號	FALSE
singleSelect	boolean	是否單行選定	FALSE
fit	boolean	是否自動適應父容器	FALSE
pageNumber	number	分頁初始化行號	1
pageSize	number	初始化分頁大小	10
pageList	array	分頁大小選擇列	[10,20,30,40,50]
queryParams	object	請求數據時額外發送的參數	{}
sortName	string	排序列	null
sortOrder	string	升序還是降序 'asc' 或者 'desc'.	asc
toolbar	string	工具欄(綁定新增，查詢按鈕...)	null

Column 屬性

名稱	類型	描述	默認值
title	string	列字段要現實的名稱	undefined
field	string	列字段	undefined
width	number	寬度	undefined
rowspan	number	單元格行數	undefined
colspan	number	單元格列數	undefined
align	string	文本對齊方式，同align屬性.	undefined
sortable	boolean	是否可以被排序.	undefined
checkbox	boolean	是否具有多選框	undefined
formatter	class	方法

注： formatter：function (value, rowData, rowIndex){ }

//value 這個field綁定的值   rowData 這行數據內容  rowIndex 選擇行的行號

columns: [[

    {  field : 'Id',  title : '編號',  width : 100,  sortable : true },

    {  field : 'ClassName',  title : '類型名稱',  width : 150,  sortable : true },

    {  field : 'ClassDescribe',  title : '描述',  width : 150,  sortable : true },

    {  field : 'Id', title: '操作',  width : 150,  sortable : true,  formatter : formatOper 

 

function formatOper(index) {

     return "<a href=\"javascript:void(0)\"  onclick=\"UsDelete(" + index + ")\">刪除</a>"; 

}

Events（事件）

Name	Parameters	Description
onLoadSuccess	none	調用遠程數據成功是激活
onLoadError	none	裝載錯誤時激活
onClickRow	rowIndex , rowData	點擊一行時激活，參數包括：
		rowIndex:點擊的行數，從0開始
		rowData: 當前行的數據
onDblClickRow	rowIndex ,rowData	雙擊一行是觸發，參數包括:
		rowIndex:點擊的行數，從0開始
		rowData: 當前行的數據
onSortColumn	sort,order	對一列進行排序時激活,參數包括:
		sort:排序字段名稱
		order: 排序規則，升序，降序
onSelect	rowIndex,rowData	選中一行時激活，參數有:
		rowIndex:選中的行數
		rowData: 數據
onUnselect	rowIndex,rowData	取消選中時激活，參數：
		rowIndex:選中的行數
		rowData: 數據

onDblClickRow : function (rowIndex, rowData) { //雙擊事件

 

}

Methods（方法）

Name	Parameter	Description
options	none	返回所有屬性
resize	none	重置大小布局
reload	none	重新加載數據
fixColumnSize	none	調整列的大小
loadData	param	裝載數據，以前的數據會被移除
getSelected	none	返回選中的行，沒有則返回空
getSelections	none	返回所有的行，空則返回空數組
clearSelections	none	取消所有選中
selectRow	index	選中一行，參數為行號
selectRecord	idValue	根據主鍵查詢出一條記錄
unselectRow	index	取消選中一行

刷新datagird的兩種方法：

1.grid.datagrid('reload');

2.grid.datagrid({ url:'/Admin/SeachProductTypeInfo?Id='+ 6});//帶參數查詢（刷新 datagrid數據）

 

代碼如下：

<div id="grid" class="easyui-grid" ></div>
<div id="EditDig" class="easyui-dialog" title="用戶修改" style="width:400px;height:350px;" closed="true"  id="EditForm">
    <div id="info" closed="true" class="easyui-window"></div>
    
</div>
<script type="text/javascript">
    $(function () {
        $("#grid").datagrid({
            title: "用戶列表",
            iconCls: 'icon-save',
            methord: 'get',
            url: "/CrmUser/GetUserList/",
            sortName: 'Id',
            sortOrder: 'desc',
            idField: 'Id',
            border: true,
            width: 1000,
            height: 300,
            columns: [[
                { field: "LoginEmail", title: "登陸郵箱", sortable: true, width: 100 },
                { field: "PassWord", title: "密碼", sortable: true, width: 100 },
                { field: "TrueName", title: "真實姓名", sortable: true, width: 100 },
                { field: "Phone", title: "手機號碼", sortable: true, width: 100 },
                { field: "UserCard", title: "身份證", sortable: true, width: 100 },
                { field: "NickName", title: "昵稱", sortable: true, width: 100 },
                { field: "QQ", title: "QQ號碼", sortable: true, width: 100},
                { field: "LastLoginTime", title: "最后登陸時間", sortable: true, width: 100, formatter: formatDatebox },
                { field: "CreateOn", title: "創建時間", sortable: true, width: 100, formatter: formatDatebox },
                { field: "UpdateBy", title: "修改人", sortable: true, width: 100 },
                { field: "UpdateOn", title: "修改時間", sortable: true, width: 100, formatter: formatDatebox },
                { field: 'Id', title: '操作', width: 100, align: 'center', formatter: function (value,rowIndex) {
                    var s = '<a href="#" onclick="view(\'' + value + '\')">查看</a> ';
                    var e = '<a href="#" onclick="edit(\'' + value + '\')">編輯</a> ';
                    var d = '<a href="#" onclick="del(\'' + value + '\')">刪除</a> ';
                    return s + e + d;
                }
                }
            ]],
            //  frozenColumns: [[
            //      { field: "CreatorId",title:"創建人ID",sortable:true,width:100 }
            //  ]],
            toolbar: [{
                text: '新增',
                iconCls: 'icon-add',
                handler: edit
            }, '-', {
                text: '用戶名:&nbsp;<input type="text" id="username" style="height:18px; width: 100px;line-height: 18px; "/>'
            }, '-', {
                text: '郵件:&nbsp;<input type="text" id="email" style="height:18px; width: 100px;line-height: 18px; "/>'
            }, '-', {
                text: '查找',
                iconCls: 'icon-search',
                handler: search
            }],
            pagination: true,
            fit: true,
            fitColumns: true,
            singleSelect: true

        });
    });

    //查詢
    function search() {
        $("#grid").datagrid({
            url: "/CrmUser/GetUserList/?userName="+$("#username").val()+"&email="+$("#email").val(),
        });
    }
    //查看
    function view(pId) {
    }

    //修改
    function edit(pId) {
    }

    //刪除
    function del(pId) {
    }

    //做時間轉換
    function formatDatebox(value) {
        if (value == null || value == '') {
            return '';
        }
        var dt;
        if (value instanceof Date) {
            dt = value;
        }
        else {
            dt = new Date(value);
            if (isNaN(dt)) {
                value = value.replace(/\/Date\((-?\d+)\)\//, '$1'); //標紅的這段是關鍵代碼，將那個長字符串的日期值轉換成正常的JS日期格式
                dt = new Date();
                dt.setTime(value);
            }
        }
        return dt.format("yyyy-MM-dd");   //這里用到一個javascript的Date類型的拓展方法，這個是自己添加的拓展方法，在后面的步驟3定義
    }

    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month 
            "d+": this.getDate(),    //day 
            "h+": this.getHours(),   //hour 
            "m+": this.getMinutes(), //minute 
            "s+": this.getSeconds(), //second 
            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter 
            "S": this.getMilliseconds() //millisecond 
        };
        if (/(y+)/.test(format))
            format = format.replace(RegExp.$1,
                (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(format))
                format = format.replace(RegExp.$1,
                    RegExp.$1.length == 1 ? o[k] :
                        ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    };

    function d_close() {
        $('#EditDig').dialog('close');
    };
</script>

 

來自為知筆記(Wiz)

附件列表