jQuery EasyUI 入門

jQuery EasyUI 詳解

EasyUI 簡介

easyui 是一種基于 jQuery 的用戶界面插件集合风钻。

easyui 為創(chuàng)建現(xiàn)代化摩梧，互動普气，JavaScript 應用程序唐断，提供必要的功能麸祷。

使用 easyui 你不需要寫很多代碼澎怒，你只需要通過編寫一些簡單 HTML 標記，就可以定義用戶界面阶牍。

easyui 是個完美支持 HTML5 網(wǎng)頁的完整框架喷面。

easyui 節(jié)省您網(wǎng)頁開發(fā)的時間和規(guī)模星瘾。

easyui 很簡單但功能強大的。

官網(wǎng)地址：http://www.jeasyui.com/index.php

文檔地址：

中文文檔
英文文檔

快速入門彈出對話框 demo

第一步：下載 Jquery EasyUI

你在使用和進行開發(fā)時惧辈，請遵守官方相應的條款琳状，尊重他們的知識版權。

目前官方最新版本是：jQuery EasyUI 1.5盒齿，官方提供了兩個版本供下載念逞，GPL 版本和商業(yè)版本，你根據(jù)自己的需要下載

GPL 版本 GPL 版本在 GPl 協(xié)議下有效边翁，你能在任何遵循 GPl 協(xié)議的項目下使用它翎承。
商業(yè)版本商業(yè)版在 Commercial 協(xié)議下有效，你能在任何非 GPL/專有的協(xié)議下使用符匾。

第二步：創(chuàng)建 html 文件叨咖，并添加相關引用

創(chuàng)建項目的文件夾

easydemo                            // 項目根目錄
├── index.html                      // 我們的測試頁面
└── lib                             // 第三方組件
    └── jquery-easyui-1.5.5.2       // 下載的easyui的壓縮包解壓后的文件夾
        ├── easyloader.js           // easyui的動態(tài)加載組件的js
        ├── jquery.easyui.min.js    // 壓縮后的包！４洹芒澜！關鍵！创淡！
        ├── jquery.easyui.mobile.js
        ├── jquery.min.js           // 依賴的jq的文件
        ├── locale                  // 本地語言的文件夾
        ├── plugins                 // 拆分的組件
        └── themes                  // 樣式主題文件夾

第三步：修改 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- easyui的樣式痴晦，可以選擇其他主題 -->
  <link rel="stylesheet" href="./lib/jquery-easyui-1.5.5.2/themes/bootstrap/easyui.css">
  <!-- easyui的圖標css文件 -->
  <link rel="stylesheet" href="./lib/jquery-easyui-1.5.5.2/themes/icon.css">
  <!-- easyui 依賴jq -->
  <script src="./lib/jquery-easyui-1.5.5.2/jquery.min.js"></script>
  <!-- jq easyui的js腳本 -->
  <script src="./lib/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
  <!-- 引用語言包 -->
  <script src="./lib/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>

  <title>AICODER jQuery EasyUI Demos</title>
</head>
<body>
  <!-- 功能：點擊按鈕彈出模態(tài)對話框 -->
  <input type="button" value="彈出模態(tài)對話框" id="btnOpenDialog">

  <!-- 設置彈出來的對話框div，首先設置為隱藏 -->
  <div id="addDialog" style="display: none;">
    <h3>添加的對話框</h3>
  </div>
  <script>
    $(function () {
      $('#btnOpenDialog').on('click', function () {
        // 彈出對話框
        $('#addDialog').dialog({
          modal: true,  // 是否是模態(tài)對話框
          title: 'AICODER全棧實習--添加用戶琳彩！',  // 彈出來的窗口的標題
          width: 400, // 窗口的寬度
          height: 400, // 窗口的高度
        });
      });
    });
  </script>
</body>
</html>

結果如下：

easyui 的布局

jq easyui 把網(wǎng)頁分成了 上誊酌、下、左露乏、中碧浊、右，分別對應：North瘟仿、South箱锐、West、Center劳较、East驹止。

easyui 增加了自定義的屬性：data-options，通過它可以設置 easyui 組件的選項观蜗。

<body class="easyui-layout">
  <div data-options="region:'north',split:true" style="height:100px;"></div>
  <div data-options="region:'south',split:true" style="height:100px;"></div>
  <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
  <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
  <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
    <input type="button" value="彈出模態(tài)對話框" id="btnOpenDialog">
  </div>
</body>

布局區(qū)域選項說明

選項	類型	說明	默認值
region	String	所處的方位臊恋，可取值：`North`、`South`墓捻、`West`抖仅、`Center`、`East`	null
title	String	區(qū)域的標題	null
split	Boolean	是否跟其他區(qū)域進行分離（增加外邊距)	false
href	String	從后臺獲取 html，并顯示在此區(qū)域	null
collapsible	Boolean	是否顯示可折疊按鈕	true
iconCls	string	An icon CSS class to show a icon on panel header.	null
minWidth	Number	區(qū)域的最小寬度	10
minHeight	Number	區(qū)域的最小高度	10
maxWidth	Number	區(qū)域的最大寬度	10000
maxHeight	Number	區(qū)域的最大高度	10000

布局的方法

方法名	參數(shù)	描述
resize	param	改變布局的大小. 參數(shù) `param` 對象可以設置以下屬性: width: 布局的寬度. height: 布局的高度.
collapse	region	折疊區(qū)域, `region` 參數(shù)可以取值：`north`,`south`,`east`,`west`.
expand	region	展開區(qū)域面板, `region` 參數(shù)可以取值：`north`,`south`,`east`,`west`.
add	options	添加一個面板
remove	region	移除一個區(qū)域面板, 參數(shù) `region` 可以取值:`north`,`south`,`east`,`west`.
split	region	移除區(qū)域參數(shù) `region` 可以取值:`north`,`south`,`east`,`west`
unsplit	region	取消移除區(qū)域參數(shù) `region` 可以取值:`north`,`south`,`east`,`west`

例如：

// 改變大小
$('#cc').layout('resize', {
  width: '80%',
  height: 300
});

// 折疊區(qū)域
$('#btnCloseEast').click(function () {
  $(document.body).layout('collapse', 'east');
});

// 展開區(qū)域
$('#btnExpandEast').click(function () {
  $(document.body).layout('expand', 'east');
});

布局的事件

事件名	參數(shù)	描述
onCollapse	region	當折疊區(qū)域的時候觸發(fā)
onExpand	region	當展開區(qū)域的時候觸發(fā)
onAdd	region	當添加區(qū)域的時候觸發(fā)
onRemove	region	當移除區(qū)域的時候觸發(fā)

// 注冊監(jiān)聽事件
$(document.body).layout({
  onCollapse: function (region) {
    $.messager.alert('消息標題', '消息內容：折疊了面板：' + region, 'info');
  },
  onExpand: function (region) {
    $.messager.alert('消息標題', '消息內容：展開了面板：' + region, 'warning');
  }
});

easyui 的消息組件

easyui提供了豐富的彈出消息框的方法撤卢。

彈出消息框

$.messager.alert 方法提供了彈出消息的功能环凿，類似window.alert的功能。

此方法接受的參數(shù)：

參數(shù)名	說明
title	顯示消息框的標題
msg	消息內容.
icon	消息的內容前面的圖標凸丸，可以用圖標名為: `error`,`question`,`info`,`warning`.
fn	點擊ok按鈕后的回調函數(shù)

兩種調用模式

// 第一種： 傳入三個字符串參數(shù)
$.messager.alert('My Title','Here is a info message!','info');

// 第二種： 傳入對象參數(shù)
$.messager.alert({
  title: 'My Title',
  msg: 'Here is a message!',
  fn: function(){
    //...
  }
});

彈出確認對話框

$.messager.confirm 方法提供了彈出消息的功能拷邢，類似window.confirm的功能。

此方法接受的參數(shù)：

參數(shù)名	說明
title	顯示消息框的標題
msg	消息內容.
fn	點擊ok按鈕后的回調函數(shù)

兩種調用模式

// 第一種： 傳入三個字符串參數(shù)
$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){
  if (r){ // 如果用戶點擊確認屎慢，那么  r就是true瞭稼，否則fals
    // exit action;
  }
});

// 第二種： 傳入對象參數(shù)
$.messager.confirm({
  title: 'My Title',
  msg: 'Are you confirm this?',
  fn: function(r){
    if (r){  // 如果用戶點擊確認，那么  r就是true腻惠，否則fals
      alert('confirmed: '+r);
    }
  }
});

easyui 的樹組件

easyui 樹形菜單（Tree）也可以定義在 <ul> 元素中环肘。

初始化樹有兩種方式：

通過標簽初始化
通過js初始化

以下是通過js初始化的案例

$('#tt').tree({
  checkbox: true, // 是否顯示多選框
  data: [{
    id: 1,
    text: '北京',
    state: 'open',
    attributes: {
      url: "/demo/book/abc",
      price: 100
    },
    children: [{
      id: 7,
      text: "昌平",
      checked: true
    }, {
      id: 8,
      text: "朝陽",
      state: "closed"
    }]
  }, {
    id: 2,
    text: '山東',
    state: 'open',
    attributes: {
      url: "/demo/book/abc",
      price: 100
    },
    children: [{
      id: 9,
      text: "濰坊",
      checked: true
    }, {
      id: 10,
      text: "青島",
      state: "closed"
    }]
  },],
  animate: true,  // 節(jié)點折疊和展開是否使用動畫
  lines: true, // 是否顯示 節(jié)點之間的線條
  dnd: true, // 是否可拖拽
});

結果：

image.png

easyui 表格組件

表格是easyui里面使用最廣的組件。

DataGrid 數(shù)據(jù)表格,擴展自 $.fn.panel.defaults 集灌，用 $.fn.datagrid.defaults 重寫了 defaults 悔雹。

依賴

panel
resizable
linkbutton
pagination

用法

<table id="tt"></table>  
<script>
$('#tt').datagrid({
   url:'datagrid_data.json',
   columns:[[  
     {field:'code',title:'Code',width:100},
     {field:'name',title:'Name',width:100},  
     {field:'price',title:'Price',width:100,align:'right'}
   ]]  
});
</script>

數(shù)據(jù)表格（DataGrid）的特性

其特性擴展自 panel，下列是為 datagrid 增加的特性欣喧。

名稱	類型	說明	默認值
columns	array	datagrid 的 column 的配置對象腌零，更多詳細請參見 column 的特性。	null
frozenColumns	array	和列的特性一樣唆阿，但是這些列將被凍結在左邊益涧。	null
fitColumns	boolean	True 就會自動擴大或縮小列的尺寸以適應表格的寬度并且防止水平滾動。	false
striped	boolean	True 就把行條紋化驯鳖。（即奇偶行使用不同背景色）	false
method	string	請求遠程數(shù)據(jù)的 method 類型闲询。	post
nowrap	boolean	True 就會把數(shù)據(jù)顯示在一行里。	true
idField	string	標識字段浅辙。	null
url	string	從遠程站點請求數(shù)據(jù)的 URL扭弧。	null
loadMsg	string	當從遠程站點加載數(shù)據(jù)時，顯示的提示信息记舆。 Processing, please wait	…
pagination	boolean	True 就會在 datagrid 的底部顯示分頁欄鸽捻。	false
rownumbers	boolean	True 就會顯示行號的列。	false
singleSelect	boolean	True 就會只允許選中一行泽腮。	false
pageNumber	number	當設置了 pagination 特性時泊愧，初始化頁碼。	1
pageSize	number	當設置了 pagination 特性時盛正，初始化頁碼尺寸。	10
pageList	array	當設置了 pagination 特性時屑埋，初始化頁面尺寸的選擇列表豪筝。	[10,20,30,40,50]
queryParams	object	當請求遠程數(shù)據(jù)時，發(fā)送的額外參數(shù)。	{}
sortName	string	定義可以排序的列续崖。	null
sortOrder	string	定義列的排序順序敲街，只能用 `asc` 或 `desc`。	asc
remoteSort	boolean	定義是否從服務器給數(shù)據(jù)排序严望。	true
showFooter	boolean	定義是否顯示一行頁腳多艇。	false
rowStyler	function	返回例如 'background:red' 的樣式，該函數(shù)需要兩個參數(shù)： `rowIndex`：行的索引像吻，從0 開始峻黍。 `rowData`：此行相應的記錄。	null
loadFilter	function	返回過濾的數(shù)據(jù)去顯示拨匆。這個函數(shù)需要一個參數(shù) `data` 姆涩，表示原始數(shù)據(jù)。你可以把原始數(shù)據(jù)變成標準數(shù)據(jù)格式惭每，此函數(shù)必須返回標準數(shù)據(jù)對象骨饿，含有`total`和 `rows`特性。	null
editors	object	定義編輯行時的 editor 台腥。預定義的 editor	null
view	object	定義 datagrid 的 view 宏赘。默認的 view	null

列（Column）的特性

DataGrid 的 Column 是一個數(shù)組對象，它的每個元素也是一個數(shù)組黎侈。數(shù)組元素的元素是一個配置對象察署，它定義了每個列的字段。

名稱	類型	說明	默認值
title	string	列的標題文字蜓竹。	undefined
field	string	列的字段名箕母。	undefined
width	number	列的寬度。	undefined
rowspan	number	指一個單元格占據(jù)多少行俱济。	undefined
colspan	number	指一個單元格占據(jù)多少列嘶是。	undefined
align	string	指如何對齊此列的數(shù)據(jù)，可以用 `left`蛛碌、`right`聂喇、`center`。	undefined
sortable	boolean	True 就允許此列被排序蔚携。	undefined
resizable	boolean	True 就允許此列被調整尺寸希太。	undefined
hidden	boolean	True 就隱藏此列。	undefined
checkbox	boolean	True 就顯示 checkbox酝蜒。	undefined
formatter	function	單元格的格式化函數(shù)誊辉，需要三個參數(shù)： `value`: 字段的值。 `rowData`: 行的記錄數(shù)據(jù)亡脑。 `rowIndex`: 行的索引堕澄。	undefined
styler	function	單元格的樣式函數(shù)邀跃，返回樣式字符串來自定義此單元格的樣式，例如 `background:red` 蛙紫。此函數(shù)需要三個參數(shù)： `value`：字段的值拍屑。 `rowData`：行的記錄數(shù)據(jù)。 `rowIndex`：行的索引坑傅。	undefined
sorter	function	自定義字段的排序函數(shù)僵驰，需要兩個參數(shù)： `a`：第一個字段值。 `b`：第二個字段值唁毒。	undefined
editor	string,object	指編輯類型蒜茴。當是 string 時指編輯類型，當 object 時包含兩個特性： `type`：string枉证，編輯類型矮男，可能的類型是： `text`、`textarea`室谚、`checkbox`毡鉴、`numberbox`、`validatebox`秒赤、`datebox`猪瞬、`combobox`、`combotree`入篮。 `options`：對象陈瘦，編輯類型對應的編輯器選項。	undefined

columns : [
  [
    {
      field: 'itemid',
      title: 'Item ID',
      rowspan: 2,
      width: 80,
      sortable: true
    }, {
      field: 'productid',
      title: 'Product ID',
      rowspan: 2,
      width: 80,
      sortable: true
    }, {
      title: 'Item Details',
      colspan: 4
    }
  ],
  [
    {
      field: 'listprice',
      title: 'List Price',
      width: 80,
      align: 'right',
      sortable: true
    }, {
      field: 'unitcost',
      title: 'Unit Cost',
      width: 80,
      align: 'right',
      sortable: true
    }, {
      field: 'attr1',
      title: 'Attribute',
      width: 100
    }, {
      field: 'status',
      title: 'Status',
      width: 60
    }
  ]
]

編輯器（Editor）

用 $.fn.datagrid.defaults.editors 重寫了 defaults潮售。

每個編輯器有下列行為：

名稱	參數(shù)	說明
init	container, options	初始化編輯器并且返回目標對象痊项。
destroy	target	如果必要就銷毀編輯器。
getValue	target	從編輯器的文本返回值酥诽。
setValue	target , value	給編輯器設置值鞍泉。
resize	target , width	如果必要就調整編輯器的尺寸。

$.extend($.fn.datagrid.defaults.editors, {
  text: {
    init: function (container, options) {
      var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
      return input;
    },
    destroy: function (target) {
      $(target).remove();
    },
    getValue: function (target) {
      return $(target).val();
    },
    setValue: function (target, value) {
      $(target).val(value);
    },
    resize: function (target, width) {
      $(target)._outerWidth(width);
    }
  }
});

數(shù)據(jù)表格視圖（DataGrid View）

用 $.fn.datagrid.defaults.view 重寫了 defaults肮帐。

view 是一個對象咖驮，它告訴 datagrid 如何呈現(xiàn)行。這個對象必須定義下列方法训枢。

名稱	參數(shù)	說明
render	target, container, frozen	當數(shù)據(jù)加載時調用托修。target：DOM 對象，datagrid 對象恒界。container：行的容器睦刃。frozen：表示是否呈現(xiàn)凍結容器。
renderFooter	target, container, frozen	這是呈現(xiàn)行腳選項的函數(shù)十酣。
renderRow	target, fields, frozen, rowIndex, rowData	這是選項的函數(shù)眯勾，將會被 render 函數(shù)調用枣宫。
refreshRow	target, rowIndex	定義如何刷新指定的行。
onBeforeRender	target, rows	視圖被呈現(xiàn)前觸發(fā)吃环。
onAfterRender	target	視圖被呈現(xiàn)后觸發(fā)。

事件

其事件擴展自 panel洋幻，下列是為 datagrid 增加的事件郁轻。

名稱	參數(shù)	說明
onLoadSuccess	data	當數(shù)據(jù)加載成功時觸發(fā)。
onLoadError	none	加載遠程數(shù)據(jù)發(fā)生某些錯誤時觸發(fā)文留。
onBeforeLoad	param	發(fā)送加載數(shù)據(jù)的請求前觸發(fā)好唯，如果返回 false加載動作就會取消。
onClickRow	rowIndex, rowData	當用戶點擊一行時觸發(fā)燥翅，參數(shù)包括： rowIndex：被點擊行的索引骑篙，從 0 開始。rowData：被點擊行對應的記錄森书。
onDblClickRow	rowIndex, rowData	當用戶雙擊一行時觸發(fā)靶端，參數(shù)包括： rowIndex：被雙擊行的索引，從 0 開始凛膏。rowData：被雙擊行對應的記錄。
onClickCell	rowIndex, field, value	當用戶單擊一個單元格時觸發(fā)。
onDblClickCell	rowIndex, field, value	當用戶雙擊一個單元格時觸發(fā)缘厢。
onSortColumn	sort, order	當用戶對一列進行排序時觸發(fā)镐依，參數(shù)包括： sort：排序的列的字段名order：排序的列的順序
onResizeColumn	field, width	當用戶調整列的尺寸時觸發(fā)。
onSelect	rowIndex, rowData	當用戶選中一行時觸發(fā)吁断，參數(shù)包括： rowIndex：選中行的索引趁蕊，從 0 開始rowData：選中行對應的記錄
onUnselect	rowIndex, rowData	當用戶取消選擇一行時觸發(fā)，參數(shù)包括： rowIndex：取消選中行的索引仔役，從 0 開始rowData：取消選中行對應的記錄
onSelectAll	rows	當用戶選中全部行時觸發(fā)掷伙。
onUnselectAll	rows	當用戶取消選中全部行時觸發(fā)。
onBeforeEdit	rowIndex, rowData	當用戶開始編輯一行時觸發(fā)骂因，參數(shù)包括： rowIndex：編輯行的索引炎咖，從 0 開始rowData：編輯行對應的記錄
onAfterEdit	rowIndex, rowData, changes	當用戶完成編輯一行時觸發(fā)，參數(shù)包括： rowIndex：編輯行的索引寒波，從 0 開始rowData：編輯行對應的記錄changes：更改的字段/值對
onCancelEdit	rowIndex, rowData	當用戶取消編輯一行時觸發(fā)乘盼，參數(shù)包括： rowIndex：編輯行的索引，從 0 開始rowData：編輯行對應的記錄
onHeaderContextMenu	e, field	當 datagrid 的頭部被右鍵單擊時觸發(fā)俄烁。
onRowContextMenu	e, rowIndex, rowData	當右鍵點擊行時觸發(fā)绸栅。

方法

名稱	參數(shù)	說明
options	none	返回 options 對象。
getPager	none	返回 pager 對象页屠。
getPanel	none	返回 panel 對象粹胯。
getColumnFields	frozen	返回列的字段蓖柔，如果 frozen 設定為 true，凍結列的字段被返回风纠。
getColumnOption	field	返回指定列的選項况鸣。
resize	param	調整尺寸和布局。
load	param	加載并顯示第一頁的行竹观，如果指定 param 參數(shù)镐捧，它將替換 queryParams 特性。
reload	param	重新加載行臭增，就像 load 方法一樣懂酱，但是保持在當前頁。
reloadFooter	footer	重新加載腳部的行誊抛。
loading	none	顯示正在加載狀態(tài)列牺。
loaded	none	隱藏正在加載狀態(tài)。
fitColumns	none	使列自動展開/折疊以適應 datagrid 的寬度拗窃。
fixColumnSize	none	固定列的尺寸瞎领。
fixRowHeight	index	固定指定行的高度。
loadData	data	加載本地數(shù)據(jù)并炮，舊的行會被移除默刚。
getData	none	返回加載的數(shù)據(jù)。
getRows	none	返回當前頁的行逃魄。
getFooterRows	none	返回腳部的行荤西。
getRowIndex	row	返回指定行的索引，row 參數(shù)可以是一個行記錄或者一個 id 字段的值伍俘。
getSelected	none	返回第一個選中的行或者 null邪锌。
getSelections	none	返回所有選中的行，當沒有選中的記錄時癌瘾，將返回空數(shù)組觅丰。
clearSelections	none	清除所有的選擇。
selectAll	none	選中當前頁所有的行妨退。
unselectAll	none	取消選中當前頁所有的行妇萄。
selectRow	index	選中一行，行索引從 0 開始咬荷。
selectRecord	idValue	通過 id 的值做參數(shù)選中一行冠句。
unselectRow	index	取消選中一行。
beginEdit	index	開始對一行進行編輯幸乒。
endEdit	index	結束對一行進行編輯懦底。
cancelEdit	index	取消對一行進行編輯。
getEditors	index	獲取指定行的編輯器們罕扎。每個編輯器有下列特性：actions：編輯器能做的動作們聚唐。target：目標編輯器的 jQuery 對象丐重。field：字段名。type：編輯器的類型杆查。
getEditor	options	獲取指定的編輯器扮惦， options 參數(shù)包含兩個特性： index：行的索引。field：字段名亲桦。
refreshRow	index	刷新一行径缅。
validateRow	index	驗證指定的行，有效時返回 true烙肺。
updateRow	param	更新指定的行， param 參數(shù)包含下列特性：index：更新行的索引氧卧。row：行的新數(shù)據(jù)桃笙。
appendRow	row	追加一個新行。
insertRow	param	插入一個新行沙绝， param 參數(shù)包括下列特性：index：插入進去的行的索引搏明，如果沒有定義，就追加此新行闪檬。row：行的數(shù)據(jù)星著。
deleteRow	index	刪除一行。
getChanges	type	獲取最后一次提交以來更改的行粗悯，type 參數(shù)表示更改的行的類型虚循，可能的值是：inserted、deleted样傍、updated横缔，等等。
當 type 參數(shù)沒有分配時衫哥，返回所有改變的行茎刚。
acceptChanges	none	提交自從被加載以來或最后一次調用acceptChanges以來所有更改的數(shù)據(jù)。
rejectChanges	none	回滾自從創(chuàng)建以來或最后一次調用acceptChanges以來所有更改的數(shù)據(jù)撤逢。
mergeCells	options	把一些單元格合并為一個單元格膛锭，options 參數(shù)包括下列特性：index：列的索引。field：字段名蚊荣。rowspan：合并跨越的行數(shù)初狰。colspan：合并跨越的列數(shù)。
showColumn	field	顯示指定的列妇押。
hideColumn	field	隱藏指定的列跷究。

以下為demo：

$('#tt').datagrid({
  url: '/UserInfo/GetAllUserInfos',//rows:一頁有多少條，page：請求當前頁
  title: '用戶信息列表',
  width: 700,
  height: 400,
  fitColumns: true,
  idField: 'ID',
  loadMsg: '正在加載用戶的信息...',
  pagination: true,
  singleSelect: false,
  pageSize: 10,
  pageNumber: 1,
  pageList: [10, 20, 30],
  queryParams: queryParam,//讓表格在加載數(shù)據(jù)的時候敲霍，額外傳輸?shù)臄?shù)據(jù)俊马。
  columns: [[
    { field: 'ck', checkbox: true, align: 'left', width: 50 },
    { field: 'ID', title: '用戶的編號', width: 80 },
    { field: 'UName', title: '用戶名', width: 120 },
    { field: 'Pwd', title: '密碼', width: 120 },
    { field: 'Remark', title: '備注', width: 120 },
    {
      field: 'SubTime', title: '提交時間', width: 80, align: 'right',
      formatter: function (value, row, index) {
        return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s");
      }
    },
    {
      field: 'ModfiedOn', title: '操作', width: 120, formatter: function (value, row, index) {
        var str = "";
        str += "<a href='javascript:void(0)' class='editLink' uid='" + row.ID + "'>修改</a> &nbsp;&nbsp;";
        str += "<a href='javascript:void(0)' class='deletLink' uid='" + row.ID + "'>刪除</a>";
        return str;
      }
    }
  ]],
  toolbar: [{
    id: 'btnDownShelf',
    text: '添加',
    iconCls: 'icon-add',
    handler: function () {
      //alert("dd");
      //彈出一個添加的對話框
      addClickEvent();
    }
  }, {
    id: 'btnDelete',
    text: '刪除',
    iconCls: 'icon-cancel',
    handler: function () {
      deleteEvent();
    }
  }, {
    id: 'btnEdit',
    text: '修改',
    iconCls: 'icon-edit',
    handler: function () {
      //校驗你是否只選中一個 用戶
      var selectedRows = $('#tt').datagrid("getSelections");
      if (selectedRows.length != 1) {
        //error,question,info,warning.
        $.messager.alert("錯誤提醒", "請選中1行要修改數(shù)據(jù)丁存！", "question");
        return;
      }

      editEvent(selectedRows[0].ID);
    }
  }, {
    id: 'btnSetRole',
    text: '設置角色',
    iconCls: 'icon-redo',
    handler: function () {
      //判斷是否選中一個用戶進行角色設置。彈出一個設置角色的對話框出來柴我。
      setRole();
    }
  }, {
    id: 'btnSetAction',
    text: '設置特殊權限',
    iconCls: 'icon-redo',
    handler: function () {
      //判斷是否選中一個用戶進行角色設置解寝。彈出一個設置角色的對話框出來。
      setAction();
    }
  }],
  onHeaderContextMenu: function (e, field) {

  },
  onLoadSuccess: function (data) {
    $(".editLink").click(function () {//
      editEvent($(this).attr("uid"));
      return false;
    });
  }
});

自定義ajax請求的loader的方法艘儒，如下demo是jQuery EasyUI配合后端的json-server返回數(shù)據(jù)的demo：

      $(function () {
        $('#dtTable').datagrid({
          loadMsg: '正在加載數(shù)據(jù)中....',
          emptyMsg: '沒有數(shù)據(jù)',
          pagination: true,
          singleSelect: true,
          striped: true,
          idField: 'id',
          checkOnSelect: true,
          pageNumber: 1,
          rownumbers: true,
          pageSize: 10,
          pageList: [10, 20, 30],
          method: 'GET',
          onBeforeLoad: function (param) {
            // 請求之前還可以對參數(shù)進行修改和添加聋伦，_limit和_page是json-server的后臺參數(shù)數(shù)據(jù)
            param._limit = param.rows;
            param._page = param.page;
          },
          loader: function (param, successCallback, errorCallback) {
            // 自定義ajax請求加載數(shù)據(jù)， param是請求的參數(shù)
            // successCallback:是請求成功后的回調函數(shù)
            // errorCallback:是請求失敗后的回到函數(shù)
            $.ajax({
              url: 'http://localhost:53000/course',
              data: param,
              type: 'GET',
              dataType: 'json',
              success: function (res, status, xhr) {
                successCallback({
                  total: xhr.getResponseHeader('X-Total-Count'),
                  rows: res
                });
              },
              error: function (data) {
                errorCallback(data);
              }
            });
          },
          onLoadSuccess: function (data, status, xhr) {
            console.log(data);
          },
          columns: [[
            { field: 'id', title: '主鍵', width: 100 },
            { field: 'author', title: '作者', width: 100 },
            { field: 'author', title: '作者', width: 100 },
            { field: 'author', title: '作者', width: 100 },
            { field: 'author', title: '作者', width: 100 },
            { field: 'college', title: '大學', width: 100, align: 'right' }
          ]]
        });;
      });

easyui 的 Tab 組件

tab可以直接通過html標簽創(chuàng)建界睁。

<div id="tt" class="easyui-tabs" style="height:250px;" data-options="fit: true">
  <div title="Tab1" style="padding:20px;display:none;">
    tab1
  </div>
  <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
    tab2
  </div>
  <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="display:none;">
    tab3
  </div>
</div>

其他常用的方法：

通過js控制添加tab標簽

$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true,
    tools:[{
        iconCls:'icon-mini-refresh',
        handler:function(){
            alert('refresh');
        }
    }]
});

判斷tab是存在

// exists 可以接受一個 tab的索引觉增，或者是tab的title的字符串
$('#tt').tabs('exists', 1);
$('#tt').tabs('exists', 'tab1');

選中某個tab頁簽

$('#tt').tabs('select', 1);
$('#tt').tabs('select', 'tab1');

獲取選中的tab頁簽

$('#tt').tabs('getSelected');  // 返回tab的索引

最后編輯于：2018.06.14 13:46:46

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市翻斟，隨后出現(xiàn)的幾起案子逾礁，更是在濱河造成了極大的恐慌，老刑警劉巖访惜，帶你破解...
沈念sama閱讀 217,185評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件嘹履，死亡現(xiàn)場離奇詭異，居然都是意外死亡债热，警方通過查閱死者的電腦和手機砾嫉，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,652評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來窒篱，“玉大人焕刮，你說我怎么就攤上這事∩嗉粒” “怎么了济锄？”我有些...
開封第一講書人閱讀 163,524評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長霍转。經(jīng)常有香客問我荐绝，道長，這世上最難降的妖魔是什么避消？我笑而不...
開封第一講書人閱讀 58,339評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任低滩，我火速辦了婚禮，結果婚禮上岩喷，老公的妹妹穿的比我還像新娘恕沫。我一直安慰自己，他們只是感情好纱意，可當我...
茶點故事閱讀 67,387評論 6贊 391
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布婶溯。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪迄委。梳的紋絲不亂的頭發(fā)上褐筛，一...
開封第一講書人閱讀 51,287評論 1贊 301
城市分裂傳說
那天，我揣著相機與錄音叙身，去河邊找鬼渔扎。笑死，一個胖子當著我的面吹牛信轿，可吹牛的內容都是我干的晃痴。我是一名探鬼主播，決...
沈念sama閱讀 40,130評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼财忽，長吁一口氣：“原來是場噩夢啊……” “哼倘核！你這毒婦竟也來了？” 一聲冷哼從身側響起即彪，我...
開封第一講書人閱讀 38,985評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤笤虫，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后祖凫，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,420評論 1贊 313
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡酬凳，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,617評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年惠况，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宁仔。...
茶點故事閱讀 39,779評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡稠屠，死狀恐怖，靈堂內的尸體忽然破棺而出翎苫，到底是詐尸還是另有隱情权埠，我是刑警寧澤，帶...
沈念sama閱讀 35,477評論 5贊 345
?日本核電站爆炸內幕
正文年R本政府宣布煎谍，位于F島的核電站攘蔽，受9級特大地震影響，放射性物質發(fā)生泄漏呐粘。R本人自食惡果不足惜满俗，卻給世界環(huán)境...
茶點故事閱讀 41,088評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望作岖。院中可真熱鬧唆垃，春花似錦、人聲如沸痘儡。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,716評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至渐尿，卻和暖如春醉途，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背涡戳。一陣腳步聲響...
開封第一講書人閱讀 32,857評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工结蟋，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人渔彰。一個月前我還...
沈念sama閱讀 47,876評論 2贊 370
代替公主和親
正文我出身青樓嵌屎，卻偏偏與公主長得像，于是被迫代替她去往敵國和親恍涂。傳聞我的和親對象是個殘疾皇子宝惰，可洞房花燭夜當晚...
茶點故事閱讀 44,700評論 2贊 354

jQuery EasyUI 入門

推薦閱讀更多精彩內容