第一篇學的是做一個管理的外框，接著就是數據datagrid綁定了，這里我用asp.net mvc3來做的，主要就是熟悉屬性、方法。
打開easyui的demo 就可以看到如下一段代碼：
和上篇一樣class="easyui-datagrid", data-options="..."，這是一樣的,其他我在網上查了查，并做了整理
| 參數名 | 類型 | 描述 | 默認值 |
| 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 |
| 名稱 | 類型 | 描述 | 默認值 |
| 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 | 方法 |
| 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: 數據 |
| 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 | 取消選中一行 |
<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: '用戶名: <input type="text" id="username" style="height:18px; width: 100px;line-height: 18px; "/>' }, '-', { text: '郵件: <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>
新聞熱點
疑難解答
