jquery easy ui 1.3.4 數據表格(DataGrid)（8）

8.一、建立DataGrid

html代碼

<table id="dg"></table>

                       

$("#dg").datagrid({

                // url: "datagrid_data.json",

                data: [

                   { "code": "001", "name": "Name 1", "addr": "Address 11", "col4": "col4 data" },

                   { "code": "002", "name": "Name 2", "addr": "Address 13", "col4": "col4 data" },

                   { "code": "003", "name": "Name 3", "addr": "Address 87", "col4": "col4 data" },

                   { "code": "004", "name": "Name 4", "addr": "Address 63", "col4": "col4 data" },

                   { "code": "005", "name": "Name 5", "addr": "Address 45", "col4": "col4 data" },

                   { "code": "006", "name": "Name 6", "addr": "Address 16", "col4": "col4 data" },

                   { "code": "007", "name": "Name 7", "addr": "Address 27", "col4": "col4 data" },

                   { "code": "008", "name": "Name 8", "addr": "Address 81", "col4": "col4 data" },

                   { "code": "009", "name": "Name 9", "addr": "Address 69", "col4": "col4 data" },

                   { "code": "010", "name": "Name 10", "addr": "Address 78", "col4": "col4 data" }

                ],

                width: 400,

                height: 400,

                columns: [[{

                    title: "編號",

                    field: "code",

                    width: 100

                }, {

                    title: "名稱",

                    field: "name",

                    width: 100

                }, {

                    title: "地址",

                    field: "addr",

                    width: 100

                }, {

                    title: "col4",

                    field: "col4",

                    width: 100

                }]]

            });

也能夠這樣使用：

$("#dg").datagrid({

                url: "datagrid_data.json",

                width: 400,

                height: 400,

                columns: [[{ title: "編號",field: "code",width: 100 },

          {   title: "名稱",   field: "name",width: 100 },

          {  title: "地址",  field: "addr", width: 100},

          {  title: "col4", field: "col4",  width: 100

                }]]

            });

經過上面的代碼咱們發現,配置一個簡單grid很是簡單,使用columns屬性定義列，只須要按照columns定義的格式給定json數據就能完成顯示

8.二、toolbar

定義toolbar 有兩種方式

一、先定義好linkbutton，而後再經過id引用進來

$('#dg').datagrid({

         toolbar: '#tb'

});

<div id="tb">

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>

</div>

2經過數組方式進行配置

$('#dg').datagrid({

         toolbar: [{iconCls: 'icon-edit',handler: function(){alert('edit')}}

,'-',{iconCls: 'icon-help',handler: function(){alert('help')}}]

});

 

"-",這個符號表示在兩個button間添加一個分隔符

8.三、Column屬性說明

title:列顯示名

field:列隱藏名

width:寬

rowspan:跨行

colspan:跨列

align:數據顯示位置,'left','right','center'

halign:列標題顯示位置,'left','right','center'

sortable:是否容許排序

order:排序方式 ,'asc' 、 'desc'.

resizable:是否容許調整大小

hidden:隱藏改列

checkbox:是否顯示覆選框

formatter:設置列樣式 ,value、rowData、rowIndex 是fn的三個參數    

style:定製單元格樣式value、rowData、rowIndex 是fn的三個參數

sorter:自定義排序

8.四、DataGrid 屬性說明

columns:列配置對象

frozenColumns:配置固定在左邊的列對象

fitColumns:列自動適應寬高

resizeHandle:從新調整列寬度的位置默認右邊, 'left','right','both'

autoRowHeight:行高是否自動

toolbar:定義工具欄,定義功能欄有兩種方式處理見(7.*)

striped:是否隔行變色

method:以什麼類型的方法請求遠程數據,默認post

nowrap:是否一行顯示,默認爲true

idField:指定標示字段

url:數據請求地址

data:定義數據

loadMsg:加載時顯示的文字,默認是"Processing, please wait …  "

pagination:是否顯示分頁條

rownumbers:是否顯示行號

singleSelect:單選模式

checkOnSelect:複選框選擇則選擇該行

selectOnCheck:該行選中的同時選中複選框

pagePosition:分頁工具條顯示位置,'top','bottom','both'.

pageNumber:默認顯示的多少頁

pageSize:每頁顯示條數,

pageList:可選的每頁顯示條數,例如:[10,20,30,40,50],

queryParams:請求數據帶的額外參數

sortName:指定排序列

sortOrder:指定排序方式 ，默認asc,'asc' 、 'desc'.

remoteSort:若是是服務器數據則進行排序

showHeader:是否顯示錶頭

showFooter:定義是否顯示頁腳

rowStyler:定義行樣式

8.五、dataGrid經常使用方法

load:從服務器加載新數據,若是有參數則會替代QueryParams的參數

reload:根據上次"load"的參數，從新加載數據

loading:顯示加載狀態

loaded:隱藏加載狀態

getData:獲得加載到的數據

getRows:返回當前頁的全部rows

getRowIndex:返回指定行的index

getChecked:返回全部複選框被選中的行

getSelected：返回選中項

getSelections:返回全部選中項

clearSelections:清除全部選中項

clearChecked:清除全部被選中的複選框

selectAll:選擇所有

unselectAll:取消全選

selectRow:選擇一行，行索引從0開始。

8.六、dataGrid常見事件

onLoadSuccess:數據加載成功

onLoadError:數據加載錯

onBeforeLoad:數據加載前

onClickRow:點擊一行觸發

onDblClickRow:雙擊一行觸發

onClickCell:點擊一個單元格觸發

onDblClickCell:雙擊單元觸發

onSelect:選擇一行觸發

onCheck:複選框選中後觸發

8.七、editDateGrid(可編輯表格)

可編輯表格與普通表格使用大體相同，只是可編輯表格須要給每一個單元格指定一個編輯對象便可

editor: {

           type: "text",

            options: {

                   required: true

           }

}

指定編輯對象後，咱們還須要使用beginEdit方法開始一個編輯。同時也使endEdit方法結束一個編輯

$("#dg").datagrid("beginEdit", rowIndex);

$("#dg").datagrid("endEdit", lastIndex);

8.八、添加頁腳

要使用頁腳，須要使用showFooter:true設置顯示頁腳，而後在數據裏面添加名稱爲footer的數據數組。

rows: [{ "code": "001",

 "name": "Name 1",

"addr": "Address 11",

"col4": "col4 data" }]

 footer: [{

             "name": "400",

             "addr": "天河區"

 }]

8.九、建立自定義視圖

建立自定義視圖的時候須要繼承 $.fn.datagrid.defaults.view方法。同時我也須要定義一些方法來講明顯示的方式

render(target,container,frozen):數據加載時調用。

target: DOM對象，數據網格對象。

container: 行記錄容器。

frozen: 是否呈現固定容器。

renderFooter(target, container, frozen):這是一個可選函數用以展示行底。

renderRow(target, fields, frozen, rowIndex, rowData):這是一個可選函數，它能夠被render函數調用。

refreshRow(target, rowIndex):定義如何刷新指定的行。

onBeforeRender:在視圖被呈現以前觸發。

onAfterRender:在視圖被程序以後觸發。

 

繼承$.fn.datagrid.defaults.view後，重寫了renderRow方法來定義每一行的顯示樣子

var renderView = $.extend({}, $.fn.datagrid.defaults.view, {

renderRow: function (target, fields, frozen, rowIndex, rowData) {

                    var cc = [];

                    cc.push("<td colspan=" + fields.length + ">");

                    if (!frozen) {

                        cc.push('<img src="adders.png" style="height:150px;float:left">');

                        cc.push('<div style="float:left;margin-left:20px;">');

                        for (var i = 0; i < fields.length; i++) {

                            var copts = $(target).datagrid('getColumnOption', fields[i]);

                            cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');

                        }

                        cc.push('</div>');

                    }

                    cc.push("</td>");

                    return cc.join("");

                }

            });

8.十、PropertyGrid(屬性表格)

 

用法

使用標籤建立一個屬性表格。注意：列已經內置不須要再去聲明它。

<table id="pg" class="easyui-propertygrid" style="width:300px"  

        data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"></table>

使用Javascript建立一個屬性表格。

<table id="pg" style="width:300px"></table> 

$('#pg').propertygrid({   

    url: 'get_data.php',   

    showGroup: true,   

    scrollbarSize: 0   

}); 

追加一個新行到屬性表格。

var row = {   

  name:'AddName',   

  value:'',   

  group:'Marketing Settings',   

  editor:'text'  

};   

$('#pg').propertygrid('appendRow',row);  

行數據

屬性表格擴展自datagrid(數據表格)。它的行數據格式和數據表格相同。做爲一個屬性行，如下字段是必須的：

name：字段名稱。

value：字段值。

group：分組字段值。

editor：在編輯屬性值的時候使用的編輯器對象。

 

行數據示例：

 

{"total":4,"rows":[   

    {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},   

    {"name":"Address","value":"","group":"ID Settings","editor":"text"},   

    {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},   

    {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{   

        "type":"validatebox",   

        "options":{   

            "validType":"email"  

        }   

    }}   

]} 

屬性：

showGroup:定義是否顯示特性組。

groupField:定義組的字段名。

groupFormatter:定義如何格式化組的值。

方法:

expandGroup(groupIndex):展開指定組。沒有’groupIndex‘參數，展開全部組。

collapseGroup(groupIndex):摺疊指定組。沒有‘groupIndex’參數，摺疊全部組。

 

8.十一、combogrid(數據表格下拉框)

 

$('#cc1').combogrid({

                panelWidth: 310,

                value: '006',

                idField: 'id',

                textField: 'name',

                columns: [[

                 { field: 'id', title: 'Id', width: 60 },

                 { field: 'name', title: '姓名', width: 100 },

                { field: 'age', title: '年齡', width: 120 },

                ]],

                data: [

      { "id": "001", "name": "Name 1", "age": "11" },

      { "id": "002", "name": "Name 2", "age": "13" },

      { "id": "003", "name": "Name 3", "age": "87" },

      { "id": "004", "name": "Name 4", "age": "63" },

      { "id": "005", "name": "Name 5", "age": "45" },

      { "id": "006", "name": "Name 6", "age": "16" },

      { "id": "007", "name": "Name 7", "age": "27" },

                ]

 

            });

<select id="cc1" class="easyui-combogrid" name="dept" style="width:250px;"  

      ></select> 

自動完成功能

讓咱們爲數據表格下拉框控件添加高級的自動完成功能。下拉數據表格會根據用戶輸入顯示適合的結果。

$('#cc1').combogrid({   

    delay: 500,   

    mode: 'remote',   

    url: 'get_data.php',   

    idField: 'id',   

    textField: 'name',   

    columns: [[   

        {field:'code',title:'Code',width:120,sortable:true},   

        {field:'name',title:'Name',width:400,sortable:true}   

    ]]   

}); 

 

 

 

在服務器端，參數'q'必須先檢索。用戶能夠查詢數據庫，而後返回一個SQL查詢結果的JSON格式給瀏覽器。

 

get_data.php:

 

$q = isset($_POST['q']) ? $_POST['q'] : '';  // the request parameter   

// query database and return JSON result data   

$rs = mysql_query("select * from item where name like '$q%'");   

echo json_encode(...);