datagrid_datagridview - CSDN
精华内容
参与话题
  • DataGrid用法及属性

    千次阅读 2018-07-16 23:39:50
    使用方法(Usage Example) ...easyui-datagrid">   <thead>   <tr>   <th data-options="field:'code'">Code</th&am

    使用方法(Usage Example)

    从现有的表单元素创建数据表格,定义在html中的行,列和数据。

    <table class="easyui-datagrid">  
        <thead>  
            <tr>  
                <th data-options="field:'code'">Code</th>  
                <th data-options="field:'name'">Name</th>  
                <th data-options="field:'price'">Price</th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr>  
                <td>001</td><td>name1</td><td>2323</td>  
            </tr>  
            <tr>  
                <td>002</td><td>name2</td><td>4612</td>  
            </tr>  
        </tbody>  
    </table>  

     

    通过<TABLE>标记创建的DataGrid。嵌套的<TH>标签定义的列的表。

    <table class="easyui-datagrid" style="width:400px;height:250px"  
            data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  
        <thead>  
            <tr>  
                <th data-options="field:'code',width:100">Code</th>  
                <th data-options="field:'name',width:100">Name</th>  
                <th data-options="field:'price',width:100,align:'right'">Price</th>  
            </tr>  
        </thead>  
    </table>  
    

     

    使用JavaScript创建数据表格。

    <table id="dg"></table>  
    
    
    $('#dg').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'}   
        ]]   
    });  
    

    查询数据填充数据表格。

    $('#dg').datagrid('load', {   
        name: 'easyui',   
        address: 'ho'  
    });  

     

    数据更改与服务器交互,刷新当前数据。

    $('#dg').datagrid('reload');    // reload the current page data  
    

    数据表格属性(DataGrid Properties)

    属性继承控制面板,以下是数据表格独有的属性。

    名称 类型 描述 默认值
    columns array 数据表格列配置对象,查看列属性以获取更多细节。 undefined
    frozenColumns array 跟列属性一样,但是这些列固定在左边,不会滚动。 undefined
    fitColumns boolean 设置为true将自动使列适应表格宽度以防止出现水平滚动。 false
    autoRowHeight boolean 定义设置行的高度,根据该行的内容。设置为false可以提高负载性能。 true
    toolbar array,selector 数据表格顶部面板的工具栏。可能的值:
    1)数组,每个工具选项和链接按钮相同。
    2)选择显示的工具栏。
    在一个<div>的标签定义工具栏:
    $('#dg').datagrid({
    	toolbar: '#tb'
    });
    <div id="tb">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
    </div>
    

    通过数组定义工具栏:

    $('#dg').datagrid({
    	toolbar: [{
    		iconCls: 'icon-edit',
    		handler: function(){alert('edit')}
    	},'-',{
    		iconCls: 'icon-help',
    		handler: function(){alert('help')}
    	}]
    });
    
    null
    striped boolean 设置为true将交替显示行背景。 false
    method string 请求远程数据的方法类型。 post
    nowrap boolean 设置为true,当数据长度超出列宽时将会自动截取。 true
    idField string 表明该列是一个唯一列。 null
    url string 一个用以从远程站点请求数据的超链接地址。 null
    loadMsg string 当从远程站点载入数据时,显示的一条快捷信息。 Processing, please wait …
    pagination boolean 设置true将在数据表格底部显示分页工具栏。 false
    rownumbers boolean 设置为true将显示行数。 false
    singleSelect boolean 设置为true将只允许选择一行。 false
    checkOnSelect boolean 如果为true,该复选框被选中/取消选中,当用户点击某一行上。如果为false,该复选框仅检查/取消选中,当用户点击完全的复选框。
    此属性是1.3版本。
    true
    selectOnCheck boolean 如果设置为true,单击一个复选框,将始终选择行。如果为false,不会选择行选中该复选框。
    此属性是1.3版本。
    true
    pagePosition string  定义的分页栏的位置。可用的值有 'top','bottom','both'。
    此属性是可自1.3版本。
    bottom
    pageNumber number 当设置分页属性时,初始化分页码。 1
    pageSize number 当设置分页属性时,初始化每页记录数。 10
    pageList array 当设置分页属性时,初始化每页记录数列表。 [10,20,30,40,50]
    queryParams object 当请求远程数据时,发送的额外参数。

    示例:

    $('#dg').datagrid({
    	queryParams: {
    		name: 'easyui',
    		subject: 'datagrid'
    	}
    });
    
    {}
    sortName string 当数据表格初始化时以哪一列来排序。 null
    sortOrder string 定义排序顺序,可以是'asc'或者'desc'(正序或者倒序)。 asc
    remoteSort boolean 定义是否通过远程服务器对数据排序。 true
    showFooter boolean 定义是否显示行底(如果是做统计表格,这里可以显示总计等)。 false
    rowStyler function 返回样式,如:'background:red',function有2个参数:
    index:行索引,从0开始.
    row:对应于该行记录的对象。

    示例:

    $('#dg').datagrid({
    	rowStyler: function(index,row){
    		if (row.listprice>80){
    			return 'background-color:#6293BB;color:#fff;';
    		}
    	}
    });
    
     
    loader function 定义如何从远程服务器加载数据。返回false可以取消该操作。这个函数接受以下参数:
    param: 参数对象传递到远程服务器。
    success(data): 回调函数将被调用成功检索的数据。
    error():回调函数将被调用失败时检索数据。
    json loader
    loadFilter function 返回过滤的数据显示。该函数需要一个参数'data',表示原始数据。您可以更改源数据的标准数据格式。此函数必须返回标准数据对象中包含的“total”和“rows”的属性。

    示例:

    // removing 'd' object from asp.net web service json output
    $('#dg').datagrid({
    	loadFilter: function(data){
    		if (data.d){
    			return data.d;
    		} else {
    			return data;
    		}
    	}
    });
    
     
    editors object 定义当编辑一行时的编辑模式。 predefined editors
    view object 定义数据表格的视图。 default view

     

    列属性(Column Properties)

    数据表格的列是一个对象数组,即这个对象中的元素也是一个数组(js中数组是对象)。 对象数组中的每一个元素都是可配置的对象,每个可配置对象定义一个列。

     

    示例:

    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}   
    ]]  

     

    名称 类型 描述 默认值
    title string 列标题。 undefined
    field string 列字段。 undefined
    width number 列宽。 undefined
    rowspan number 表明一个单元格跨几行。 undefined
    colspan number 表明一个单元格跨几列。 undefined
    align string 表明如何对其列数据,可选值:'left','right','center'。 undefined
    sortable boolean 设置为true允许对该列排序。 undefined
    resizable boolean 设置为true允许该列被缩放。 undefined
    hidden boolean 设置为true将隐藏列。 undefined
    checkbox boolean 设置为true将显示复选框。 undefined
    formatter function 格式化单元格函数,有3个参数:
    value:字段的值。
    rowData:行数据。
    rowIndex:行索引。

    示例:

    $('#dg').datagrid({
    	columns:[[
    		{field:'userId',title:'User', width:80,
    			formatter: function(value,row,index){
    				if (row.user){
    					return row.user.name;
    				} else {
    					return value;
    				}
    			}
    		}
    	]]
    });
    
    undefined
    styler function 单元格样式函数,返回样式字符串装饰表格如'background:red',function有3个参数:
    value:字段值。
    rowData:行数据。
    rowIndex:行索引。

    示例:

    $('#dg').datagrid({
    	columns:[[
    		{field:'listprice',title:'List Price', width:80, align:'right',
    			styler: function(value,row,index){
    				if (value < 20){
    					return 'background-color:#ffee00;color:red;';
    				}
    			}
    		}
    	]]
    });
    
    undefined
    sorter function T自定义字段排序函数,有2个参数:
    a:该列的第一个值。
    b:该列的第二个值。

    示例:

    $('#dg').datagrid({
    	remoteSort: false,
    	columns: [[
    		{field:'date',title:'Date',width:80,sortable:true,align:'center',  
    			sorter:function(a,b){  
    				a = a.split('/');  
    				b = b.split('/');  
    				if (a[2] == b[2]){  
    					if (a[0] == b[0]){  
    						return (a[1]>b[1]?1:-1);  
    					} else {  
    						return (a[0]>b[0]?1:-1);  
    					}  
    				} else {  
    					return (a[2]>b[2]?1:-1);  
    				}  
    			}  
    		}
    	]]
    });
    
    undefined
    editor string,object 表明编辑类型。如果属性是字符串类型表示编辑类型,如果是对象则包含2个参数:
    type:字符串,编辑类型,可选值:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
    options:对象,对象于编辑类型的编辑器属性。
    undefined

     

    编辑器(Editor)

    使用$.fn.datagrid.defaults.editors重载默认值。

     

    每个编辑器都有以下方法:

    名称 属性 描述
    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;   
            },   
            getValue: function(target){   
                return $(target).val();   
            },   
            setValue: function(target, value){   
                $(target).val(value);   
            },   
            resize: function(target, width){   
                var input = $(target);   
                if ($.boxModel == true){   
                    input.width(width - (input.outerWidth() - input.width()));   
                } else {   
                    input.width(width);   
                }   
            }   
        }   
    });  

     

    数据表格视图(DataGrid View)

    使用$.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 target, rows 在视图被呈现之前触发。
    onAfterRender target 在视图被程序之后触发。

     

    事件(Events)

    事件继承控制面板,以下是数据表格独有的属性。

    名称 属性 描述
    onLoadSuccess data 当数据载入成功时触发。
    onLoadError none 当载入远程数据发生错误时触发。
    onBeforeLoad param 在请求载入数据之前触发,如果返回false将取消载入。
    onClickRow rowIndex, rowData 当用户点击行时触发,参数如下:
    rowIndex:被点击的行索引,从0开始。
    rowData:对应于被点击的行的记录。
    onDblClickRow rowIndex, rowData 当用户双击一行时触发,参数如下:
    rowIndex:被点击的行索引,从0开始。
    rowData:对应于被点击的行的记录。
    onClickCell rowIndex, field, value 当用户点击单元格时触发。
    onDblClickCell rowIndex, field, value 当用户双击单元格时触发。

    示例:

    // when double click a cell, begin editing and make the editor get focus
    $('#dg').datagrid({
    	onDblClickCell: function(index,field,value){
    		$(this).datagrid('beginEdit', index);
    		var ed = $(this).datagrid('getEditor', {index:index,field:field});
    		$(ed.target).focus();
    	}
    });
    
    onSortColumn sort, order 当用户对列排序时触发,参数如下:
    sort:排序字段名称。
    order:排序顺序。
    onResizeColumn field, width 当用户调整列宽时触发。
    onSelect rowIndex, rowData 当用户选择一行是触发,参数如下:
    rowIndex:被选择的行索引,从0开始。
    rowData:对应于被选择行的记录。
    onUnselect rowIndex, rowData 当用户取消选择一行时触发,参数如下:
    rowIndex:被取消选择的行索引,从0开始。
    rowData:对应于被取消选择行的记录。
    onSelectAll rows 当用户选择所有行时触发。
    onUnselectAll rows 当用户取消选择所有行时触发。
    onCheck rowIndex,rowData 当用户选中行时触发,参数包含:
    rowIndex:选中行的索引,从0开始
    rowData:选中的行对应的记录
    此属性是1.3版本。
    onUncheck rowIndex,rowData 当用户取消选中行时触发,参数包含:
    rowIndex:取消选中行的索引,从0开始
    rowData:未经检查的行对应的记录
    此属性是1.3版本。
    onCheckAll rows 当用户检查所有行时触发。此属性是1.3版本。
    onUncheckAll rows 用户取消所有行时触发。此属性是1.3版本。
    onBeforeEdit rowIndex, rowData 当用户开始编辑一行时触发,参数如下:
    rowIndex:正在编辑的行索引,从0开始。
    rowData:对应于正在编辑的行的记录。
    onAfterEdit rowIndex, rowData, changes 当用户编辑完成时触发,参数如下:
    rowIndex:正在编辑的行索引,从0开始。
    rowData:对应于正在编辑的行的记录。
    changes:被改变的字段内容,对应方式为字段:值。
    onCancelEdit rowIndex, rowData 当用户取消编辑行时触发,参数如下:
    rowIndex:正在编辑的行索引,从0开始。
    rowData:对应于正在编辑的行的记录。
    onHeaderContextMenu e, field 当数据表格的列标题被鼠标右键单击时触发。
    onRowContextMenu e, rowIndex, rowData 当一行被鼠标右键单击时触发。

     

    方法(Methods)

     

    名称 属性 描述
    options none 返回属性对象。
    getPager none 返回页面对象。
    getPanel none 返回控制面板对象。
    getColumnFields frozen 返回列字段,如果设置了frozen属性为true,将返回固定列的字段名。
    示例:
    var opts = $('#dg').datagrid('getColumnFields');	// get unfrozen columns
    var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
    
    getColumnOption field 返回特定的列属性。
    resize param 缩放和布局。
    load param 载入并显示第一页的记录,如果传递了'param'参数,它将会覆盖查询参数属性的值。通过传递一些参数,通常做一个查询,这个方法可以被称为从服务器加载新数据。
    $('#dg').datagrid('load',{
    	code: '01',
    	name: 'name01'
    });
    
    reload param 重载记录,跟'load'方法一样但是重载的是当前页的记录而非第一页。
    reloadFooter footer 重载行底记录。 示例:
    // update footer row values and then refresh
    var rows = $('#dg').datagrid('getFooterRows');
    rows[0]['name'] = 'new name';
    rows[0]['salary'] = 60000;
    $('#dg').datagrid('reloadFooter');
    
    // update footer rows with new data
    $('#dg').datagrid('reloadFooter',[
    	{name: 'name1', salary: 60000},
    	{name: 'name2', salary: 65000}
    ]);
    
    loading none 显示载入状态。
    loaded none 隐藏载入状态。
    fitColumns none 让列宽自动适应数据表格的宽度。
    fixColumnSize field 固定列尺寸。如果“field' 参数未指定,将所有列的大小固定。

    示例:

    $('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size
    $('#dg').datagrid('fixColumnSize');  // fix all columns size
    
    fixRowHeight index 固定特定列的高度。如果“index' 参数未指定,将所有列的高度固定。
    autoSizeColumn field 自动调整列宽,以适应内容。此方法是1.3版本特有的。
    loadData data 载入本地数据,旧记录将被移除。
    getData none 返回已载入数据。
    getRows none 返回当前页的记录。
    getFooterRows none 返回行底记录。
    getRowIndex row 返回指定行的索引,row参数可以是行记录或者是一个id字段的值。
    getChecked none 返回所有行的复选框已被选中。此方法是1.3版本特有的。
    getSelected none 返回第一个被选择的行记录或null。
    getSelections none 返回所有被选择的行,当没有记录被选择时,将返回一个空数组。
    clearSelections none 取消所有的已选择项。
    selectAll none 选择所有页面的行。
    unselectAll none 取消选择所有页面的行。
    selectRow index 选择一行,行索引从0开始。
    selectRecord idValue 通过传递id参数来选择一行。
    unselectRow index 取消选择一行。
    checkAll none 检查所有页面的行。此方法是1.3版本特有的。
    uncheckAll none 取消检查所有当前页面的行。此方法是1.3版本特有的。
    checkRow index 检查行,行索引从0开始。此方法是1.3版本特有的。
    uncheckRow index 取消检查行,行索引从0开始。此方法是1.3版本特有的。
    beginEdit index 开始编辑一行。
    endEdit index 结束编辑。
    cancelEdit index 取消编辑。
    getEditors index 获取指定行的编辑器,每个编辑器有如下属性:
    actions:编辑器可以做的行为。
    target:目标编辑器jQuery对象。
    field:字段名。
    type:编辑器类型。
    getEditor options 获取特定的编辑器,options参数有2个属性:
    index:行索引。
    field:字段名。

    示例:

    // get the datebox editor and change its value
    var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
    $(ed.target).datebox('setValue', '5/4/2012');
    
    refreshRow index 刷新一行。
    validateRow index 校验指定的行,如果有效返回true。
    updateRow param 更新指定的行,param参数包含如下属性:
    index:要更新的行索引。
    row:新的行数据。

    示例:

    $('#dg').datagrid('updateRow',{
    	index: 2,
    	row: {
    		name: 'new name',
    		note: 'new note message'
    	}
    });
    
    appendRow row 添加一行。 新的行会被添加到最后一个位置:
    $('#dg').datagrid('appendRow',{
    	name: 'new name',
    	age: 30,
    	note: 'some messages'
    });
    
    insertRow param

    插入一个新行,param参数包含如下属性:
    index:要插入的行索引,如果没有定义则在最后面添加一个新行。
    row:行数据。

    示例:

    // insert a new row at second row position
    $('#dg').datagrid('insertRow',{
    	index: 1,	// index start with 0
    	row: {
    		name: 'new name',
    		age: 30,
    		note: 'some messages'
    	}
    });
    
    deleteRow index 删除一行。
    getChanges type 获取从最后一次提交开始的被修改的所有行,type参数表明修改的类型,可选值:inserted,deleted,updated等 。当没有传递type参数时,返回所有被修改的行。
    acceptChanges none 提交所有修改的数据,提交后的数据将不能再修改或者回滚。
    rejectChanges none 回滚自创建以来或自上次调用AcceptChanges,所有的变化数据。
    mergeCells options 合并单元格,options参数包含如下属性:
    index:行索引。
    field:字段名。
    rowspan:整合单元格要跨的行数。
    colspan:整合单元格要跨的列数。
    showColumn field 显示特定的列。
    hideColumn field 隐藏特定的列。

     

      1     /
      2         //初始化数据
      3     function initGrid()
      4         {  
      5             $('#grid').datagrid({
      6                 width:'100%',    
      7                 height:'auto',
      8                 nowrap: true,
      9                 striped: true,
     10                 fitColumns:false,
     11                 url:'${contextPath}/cardGift/cardGift.do?method=getCardGiftList&activeId=${information.cardGiftActive.activeId}',
     12                 queryParams:queryParam,
     13                 remoteSort:false,
     14                 //Grid对应的主键列
     15                 idField:'',
     16                 singleSelect:true,
     17                 columns:[[
     18                         {field:'serial',title:'',width:15,checkbox:true},
     19                         {field:'activeName',title:'活动名称',width:50,sortable:true},
     20                         {field:'giftGoodId',title:'赠品商品编码',width:80},
     21                         {field:'goodsName',title:'商品名称',width:120},
     22                         {field:'giftCodeTotal',title:'赠品码生成数量',width:100},
     23                         {field:'genCodeNumber',title:'已生成赠品码数量',width:100},
     24                         {field:'startTime',title:'赠品发放起始时间',width:125},
     25                         {field:'endTime',title:'赠品发放结束时间',width:125},
     26                         {field:'memo',title:'备注',width:120}
     27                 ]],
     28                 pagination:true,
     29                 rownumbers:true,
     30                 toolbar:[
     31                 '-',{
     32                     id:'btnClearSelections',
     33                     text:'修改活动商品',
     34                     iconCls:'icon-edit',
     35                     handler:function(){
     36                         editData();
     37                     }
     38                 },'-',{
     39                     id:'btnDel',
     40                     text:'删除活动商品',
     41                     iconCls:'icon-no',
     42                     handler:function(){
     43                         deleteData();
     44                     }
     45                 },
     46                 '-',{
     47                     id:'btnClearSelections',
     48                     text:'清除选择',
     49                     iconCls:'icon-cut',
     50                     handler:function(){
     51                         $('#grid').datagrid('clearSelections');
     52                         //设置选中值
     53                         document.addForm.reset();
     54                         $('#giftCodeTotal').val("0");
     55                         $('#memoData').html("");
     56                         $('#submitBtn').html("确认提交");
     57                         $('#submitBtn').attr('onclick',"addSubmit('insert');");
     58                     }
     59                 }],
     60                 onLoadError:function(){
     61                     XW_dialog.alert('','加载数据失败!');
     62                 }
     63                 
     64             });
     65             
     66             //设置分页控件  
     67             var p = $('#grid').datagrid('getPager');  
     68             $(p).pagination(PAGE_TEMPLATE);
     69         }
     70         
     71         
     72         function editData(){
     73             var row = $('#grid').datagrid("getSelections");
     74             if($(row).length < 1 || $(row).length > 1)
     75             {
     76                 XW_dialog.alert('',"请选择要查看的记录,只能选取单行!");
     77                 return ;
     78             }
     79             //设置默认选中
     80             $('#goodsSelect').combogrid('grid').datagrid('selectRecord',row[0].giftGoodId);
     81             $('#goodsSelect').hide();
     82             //设置选中值
     83             $('#giftCodeTotal').val(row[0].giftCodeTotal);
     84             $('#memoData').html(row[0].memo);
     85             $('#submitBtn').html("更新");
     86             $('#submitBtn').attr('onclick',"addSubmit('update');");
     87             $('#resetBtn').hide();
     88             
     89         }
     90         
     91         
     92         function deleteData(){
     93         var data = $('#grid').datagrid("getSelections");
     94         //删除 
     95         var delurl = "${contextPath}/cardGift/cardGift.do?method=deleteCardGift&activeId="+data[0].activeId+"&giftGoodId="+data[0].giftGoodId;
     96         //发送删除请求
     97         $.ajax({
     98            type: "POST",
     99            dataType:'json',
    100            url: delurl,
    101            success: function(msg){
    102              if(msg.success)
    103                 {
    104                     //保存回调函数使用的数据
    105                     XW_dialog.addData('callbackData',msg.map);
    106                     //删除成功
    107                     XW_dialog.tips(msg.errorMsg, 3);
    108                     deleteCallBack();
    109                 }
    110                 else
    111                 {
    112                     XW_dialog.alert('',msg.errorMsg);
    113                 }
    114            }
    115     });
    116 }    
    117         
    118         
    119         //删除记录回调函数,默认调用刷新记录方法,
    120         function deleteCallBack(){
    121             reloadGrid("grid");
    122         }
    123     

     

    展开全文
  • DataGrid控件介绍

    万次阅读 2012-03-28 16:40:38
    DataGrid控件介绍 1. 引言 Rich UI中的DataGrid组件可以在表中显示一组行数据。本文将详细介绍DataGrid组件相关信息。 如果想要较好的理解DataGrid,你需要熟悉以下内容: 如何定义表头 如何定义behavior...

    DataGrid控件介绍

    1. 引言

    Rich UI中的DataGrid组件可以在表中显示一组行数据。本文将详细介绍DataGrid组件相关信息。

    如果想要较好的理解DataGrid,你需要熟悉以下内容:

    • 如何定义表头
    • 如何定义behavior,它是DataGrid组件中包含一系列behavior函数的属性。当组件被渲染时,属性中的behavior函数将被调用。
    • 如何定义listener,它是DataGrid组件中包含一系列listener函数的属性。这些函数可以响应用户操做。例如,当用户选择或者取消勾选框时对应的listener函数将被调用。
    • 如何对列的排序进行定制。
    • 如何对DataGridColumn格式进行定制。
    • 其他关于DataGrid的技巧,例如分页,使用Data Loader,等等。

    Behaviors和listeners可以改变style属性并可以调用多种处理逻辑;例如改变某列的排序方法;调用服务;计算结果并在某列中显示;调整某些其他组件并将其内嵌至某一列中。你可以根据以上逻辑来实现你的想法;比如你可以做如下操作;

    1. 在某一行中获取user ID。
    2. 通过这个user ID来调用REST服务,从而将图片返回至回调函数中。
    3. 将这个返回的图片嵌入至handler中定义的全局图片组件。
    4. 将此图片放置在user ID的同一行中。

    你可以使用许多有用的DataGrid属性,方法和扩展来完成你想实现的功能。我想现在你已经跃跃欲试,迫不及待的想开始DataGrid之旅了吧。那么我们就从创建一个RUI DataGrid组件开始吧。

     

    2. 创建一个简单的DataGrid组件

    本章是一个一步一步的指导教程。通过这个教程,你可以尝试在EDT中创建一个包含DataGrid组件的RuiHandler。

    2.1. 右击EGL project/package >> New >> Handler. New EGL Handler向导会弹出。

    填写名字一栏并选择Rich UI Handler作为模板,然后点击Finish。Handler会被自动创建至目标package里。

    2.2. 当Handler创建好,它会自动的在EGL Rich UI编辑器中被打开。或者你可以通过双击文件或者右击>> Open With >> EGL Rich UI Editor来打开。

    切换至design视图,你可以在右侧看到Palette面板。你可以在“Display and Input”一栏中找到DataGrid组件。你可以将其从Palette中拖拽至design区域中。

    当拖拽结束时,“New Variable”向导会自动弹出。

    输入DataGrid变量名并点击OK。DataGrid将出现在design面板中,并且源码同时被更新。

     

    2.3. 定义一个Record类型作为作为Record数组的基础结构。 每一个Record包含了一行中所需要展示的数据。你可以为Record另外创建一个新的EGL源文件或者可以直接将Record定义添加到RUI Handler的最下方。

    Record Stock 
       Symbol string;
       NumShares int;
       Quote  decimal(5,2);
       SelectQuote boolean;
    end
    

    2.4. 如下例所示,声明Record的数组类型

    stockList Stock[] =[new Stock{SelectQuote = false, Symbol = "Company1", Quote = 100.00, NumShares = 40},
                          new Stock{SelectQuote = false, Symbol = "Company2", Quote = 200.00, NumShares = 10}
                    		];
    

    2.5. 将DataGrid声明更改至适合之前创建的Record模式。

    DataGrid DataGrid{layoutData = new GridLayoutData{row = 1, column = 1}, behaviors =[], headerBehaviors =[], columns =[
                        new DataGridColumn{name = "Symbol", displayName = "Company Symbol"},
                        new DataGridColumn{name = "Quote", displayName = "Price Per Share"},
                        new DataGridColumn{name = "NumShares", displayName = "Number of Shares"},
                        new DataGridColumn{name = "Total", displayName = "Value of Shares", formatters =[totalFormatter
                                ]}]};
    

    前三个DataGridColumn分别引用了Record的三个属性。第四个声明则定义了一个计算结果列,这一列没有引用Record的属性。所以,在Record中没有一个叫Total的属性。

    DataGridColumn声明的顺序决定了每一列在DataGrid中的显示顺序。你可以为data属性赋值一个Stock类型的Record数组。以下是一段示例代码:

    DataGrid.data = stockList as any[];

    你可以直接将这行代码放到start函数中。数组中每一项都提供了DataGrid中的一行数据。

     

    2.6. 添加formatter函数

    你可以通过改变相应属性的值来添加behavior和listener函数。每一个属性都与一个代理函数类型相关,这个代理函数定义了可以被添加到属性里的函数定义,包括参数和返回类型。在这个例子中,第四列的DataGridColumn formatters被使用,它会调用了一个含有三个参数没有返回类型的函数。以下是这个函数:

    function totalFormatter(class string inOut, value string inOut, rowData any in)
        // display the total value of the shares after calculating the value 
        // from the content of two other columns in the same row
            value = rowData.NumShares as int * rowData.Quote as decimal(5, 2);
    end
    

    当Grid被渲染时,表中的每行数据都会调用formatters属性中包含的函数。被调用函数的第三个参数包含了所有所需的数据,另外还可以通过第一个控制CSS class的参数改变单元的样式,或者通过第二个参数控制相应的值。

     

    2.7. 切换至Preview

    之前创建的DataGrid应该已经如图所示的在Preview模式中生成。




    2. DataGridColumn属性

    你可以为DataGrid数据Record中,每一个属性列设置相应的列属性。每一列都包含如下属性。:

     

    • alignment: 一个int常量来控制水平布局:

    DataGridLib.ALIGN_LEFT(默认)

    列内容靠左对齐

    DataGridLib.ALIGN_RIGHT

    列内容靠右对齐

    DataGridLib.ALIGN_CENTER

    列内容居中

    • columnComparator: 当对该列进行排序时使用这个函数来进行比较。

    下面是比较函数的代理函数定义格式:

    Delegate ColumnComparator(data1 any in, data2 any in) returns (int) end

    data1

    第一个对比单元的值

    data2

    第二个对比单元的值

    函数返回如下int类型值:

    o       -1 当data1小于data2

    o       1  当data1大于data2

    o       0  当data1等于data2

    下面是一个示例函数:

    Function CompareTwo(myFirst ANY in, mySecond ANY in) returns (int)
       if ( (myFirst as string )[8:8] == "6")
          return(-1);
       else
          return(1);  
       end
    end
    
    • displayName: 所显示的列名。如果此属性未设置的话,将会默认显示该列的name属性。
    • enableSorting: 一个布尔类型来指明该列是否支持排序。默认为真,即可以排序。
    • formatters: Grid渲染前会调用此函数来改变每个单元的格式。每个单元格都会调用一次。

    以下是相应代理函数的定义格式:

    Delegate CellFormatter(class String inout, value String inout, rowData any in) end

    class

    列中单元格所使用的CSS class文件The CSS class

    value

    单元格的值,总是STRING类型。如果单元格内为选择框,则值为true或者false。

    rowData

    单元格所在行的数据。

     

    • headerAlignment: 一个int值来设置列名的对齐方式。

    DataGridLib.ALIGN_LEFT(默认)  向左对齐

    DataGridLib.ALIGN_RIGHT      向右对齐

    DataGridLib.ALIGN_CENTER     居中对齐

     

    • ignoreCase: 通过一个布尔类型来指定在排序过程中大小写是否被忽略。默认是否,即考虑大小写。此属性仅当用户未设置columnComparator 属性时生效。
    • name: 指定列所对应record中的field名称。同时也是默认的列标题名。
    • sortDirection: 一个常量来指定用户下一次排序所执行的排序顺序:

    DataGridLib.SORT_UP(初始默认值)

    升序

    DataGridLib.SORT_DOWN

    降序

    DataGridLib.SORT_NONE

    不排序

    你可能需要在排序对比函数中使用到这个属性。

    • width: 用来制定列的宽度属性,以像素值来设置。

    3. DataGrid 属性

    以下是在DataGrid控件中支持的属性:

    • behaviors: 一个方法数组的引用。当DataGrid渲染时会顺序的调用所有引用的函数。这个属性不适用于列标题单元。

    这段代码是behaviors代理函数的定义,每个方法必须符合如下格式:

    Delegate 
       DataCellBehavior(grid DataGrid in, cell Widget in, rowData ANY in, 
                    rowNumber INT in, column DataGridColumn in)
    end
    

    grid

    DataGrid控件.

    cell

    单元格展示所使用的控件。这个控件必须是基于HTML DIV标签的。

    rowData

    包含行数据的record

    rowNumber

    行号,从1到DataGrid的最大行数。

    column

    包含列定义信息的DataGridColumn控件

    • checkBoxListeners: 一系列listener方法的引用。当用户选择或者取消checkbox的时候会触发所包含的listener方法。

    以下是相应的代理函数的定义:

    Delegate 
       CheckBoxListener(grid DataGrid in) end
    end
    

    以下是本文之前例子中的checkBoxListener例子,响应用户的选择操作:

    function myListener(grid DataGrid in)
       columnRetrieve Stock[];
       columnRetrieve = grid.getChecked() as Stock[];
       numberOfRows int = columnRetrieve.getSize();
    
       if (numberOfRows > 0)
          for (i int from 1 to numberOfRows)
             sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");
           end
       end
    end
    
    • checkBoxWidth: 用来改变系统提供选择框的宽度,以像素为单位。默认值为20。
    • columns: 一系列DataGridColumn定义。
    • data: DataGrid所展示的数据,ANY[]类型。
    • editorBehaviors: 一系列Behavior方法。当DataGrid渲染时会被顺序调用。目的是将widget放置到单元格中。

    以下是相应的代理函数定义:

    Delegate 
       EditorBehavior(grid dataGrid in, cell Widget in, rowData any in, 
                      rowNumber INT in, column DataGridColumn in, value ANY in) 
                      returns (Widget)
    end
    
    • headerBehaviors: 一系列列标题行为方法的集合。当DataGrid控件绘制时列标题单元格会调用这些方法。这些方法都会基于与behavior属性相同的代理函数定义。
    • pageSize: 一个整型变量来指定每一页中显示的行数。默认值是10。在showButtonBar和showScrollBar属性中有更详细的介绍。
    • rowHeight: 一个整型变量来指定每一行的最小高度,以像素为单位。
    • selectionListeners: 一系列Listener函数。这些函数会相应在用户有选择操作时被调用,同事当setSelection,selectAll和deSelectAll函数被调用时也会触发这些listener函数。

    以下是listener函数必须符合的代理函数格式。

    Delegate 
       SelectionListener(grid DataGrid in) end
    end
    

    以下是与本文第一个例子中相同的listener函数示例。当用户做选择操作时会显示symbols属性。

    function myListener(grid DataGrid in)
       columnRetrieve Stock[];
       columnRetrieve = grid.getSelection() as Stock[];
       numberOfRows int = columnRetrieve.getSize();
    
       if (numberOfRows > 0)
          for (i int from 1 to numberOfRows)
             sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");
           end
       end
    end
    

    如果需要更详细的了解选择操作的代码写法,可以查看本文之后的selectAll和setSelection方法的介绍。

    • sortListeners: 一系列排序listener方法。仅当用户对列进行排序操作时,这些方法会被调用。仅当enableSort属性值为真时排序listener方法才会被调用。

    以下是函数需要符合的代理格式:

    Delegate 
       SortListener(grid DataGrid in, sortColumn DataGridColumn in) end
    end
    

    grid  被排序的DataGrid控件

    sortColumn  被排序的列

    以下是示例:

    function mySortListener(grid DataGrid in, sortColumn DataGridColumn in)
       syslib.writeStdOut("You sorted the " + sortColumn.displayName + " column. ");
    end
    
    • startRow: 一个整型变量来指定第一页所显示的行。默认值为第一行。更多的详细介绍可以查看showButtonBar。
    • selectionMode: 一个常量来指定用户是否能选择多行。同样也可以指定setSelection和selectAll是否能选择多行:

    DataGridLib.MULTIPLE_SELECTION(默认选项)

    可以同时支持单选或者多选

      • 按住CTRL键来选择多行
      • 按住SHIFT键来选择之间所涵盖的所有行

    可以支持跨页的选择。

    DataGridLib.SINGLE_SELECTION

    单选模式

    DataGridLib.DISABLE_SELECTION

    禁止选择模式

    • showButtonBar: 一个布尔型属性来表明是否显示ButtonBar,用来换页的按钮集。当此属性为真时,以下属性也会被激活:
      • pageSize 每一页中显示的行数
      • startRow 指明哪一行是首先需要展示的。例如,一共有20行,pageSize为4并且startRow为6,那么DataGrid会首先显示第二页的第二行。

    showButtonBar只能在以下情况被激活:

      • 当每页中的显示行数小于总行数时;并且
      • showScrollBar属性为否。
    • showCheckBoxes: 一个布尔型属性来表明是否显示系统提供的选择框。默认值为否。系统支持的选择框会在每行的最左侧显示。
    • showHeader:一个布尔型值来指明是否显示表格的标题单元格。默认值为真。
    • showScrollBar: 一个布尔型值来指明是否显示滚动条。当此值为真时showButtonBar将失效。

    4. 在Properties视图中修改DataGrid属性

    在之前的章节中,我们介绍了如何生成一个简单的包含DataGrid控件的RuiHandler。在上一节中我们还详细介绍了DataGrid的所有属性。同时,EDT还支持通过界面来修改大部分重要属性。你可以在Properties视图中便捷的改变他们,同时代码也会随之自动改变。以下是Properties视图的一个截图。


    在Properties视图中分为7个子标签。General, Border,Spacing, Position, Appearance, Accessbility, Layout and Events。由于大多数控件都有很多通用的属性,所以大多数DataGrid可视化改变的属性被列在General标签栏中。以下为这些属性pageSize,startRow, checkBoxWidth, rowHeight, cellBorder, cellPadding, selectionMode,showHeader, showButtonBar, enableSorting, showScrollbar and showCheckBoxes。我们已经在上一节中介绍过他们。


    5. DataGrid支持的方法

    以下是DataGrid支持的方法:

    • cancelDataLoader: 主要用在exception处理函数中,用来表明DataGrid所需要的数据已经不可用。它不会结束data Loader接下来的执行,但是会终止等待data Loader完成的操作并且重新以之前的数据来重绘DataGrid控件。
    • checkAll: 你可以通过这个函数来全选系统支持的选择框。甚至可以在选择框被隐藏的时候选中它们。
    • deSelectAll:取消所有现在处在选中状态的行。这个方法是航选择机制的一部分,与系统提供选择框独立。
    • getChecked: 获取已选中行的数据,以下是函数定义。
    function getChecked() returns (any[])

    下面是一段示例代码,他先是选中行的Symbol属性:

    function myResponse (e event in)
       columnRetrieve Stock[];
       columnRetrieve = grid.getChecked() as Stock[];
       numberOfRows int = columnRetrieve.getSize();
    
       if (numberOfRows > 0)
          for (i int from 1 to numberOfRows)
             sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");
          end
       end
    end
    

    需要注意的是getChecked方法获取的数据顺序取决于当前所显示的顺序。所以排序与否会影响获取的顺序。

    • getCurrentPageIndex: 获取当前页数:
    function getCurrentPageIndex() returns (int)
    • getPageCount: 获取可用的页数
    function getPageCount() returns (int)
    • getSelection: 获取已选择行的数据:
    function getSelection() returns (any[])

    以下是本文开始示例代码中的一段,会显示已选择行的数据并打出Symbol属性的值。

    function myResponse (e event in)
       columnRetrieve Stock[];
       columnRetrieve = grid.getSelection() as Stock[];
       numberOfRows int = columnRetrieve.getSize();
    
       if (numberOfRows > 0)
          for (i int from 1 to numberOfRows)
             sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");
          end
          grid.deSelectAll();
       else
          sysLib.writeStdOut("Select one or more rows.");                    
       end 
    end
    

    与getCheck方法相同,getSelection所获取数据的顺序同样与当前数据显示的顺序相关。

    goToPage: 切换至所选的页面。如果输入为小于或等于1的值,则返回第一页。如果大于页面总数则跳转至最后一页:

    function goToPage(pageNumber int in)
    • selectAll: 选择DataGrid所有行。

    setChecked: 选择某一个或者多个系统提供选择框支持的行。你甚至可以在选择框隐藏的时候选择:

    function setChecked(selection any[] in)

    一下是一个示例函数,展示了两种函数使用方式:

    function start()
    
    	  grid.setChecked([grid.data[2], grid.data[3]]);
    
       // alternative coding
       myAny ANY[] = [grid.data[2], grid.data[3]];
       grid.setChecked(myAny);
    end
    
    • setSelection: 用来设置选择某一行或者多行。大多数情况下,这个函数时用来在DataGrid绘制时自动选择某些行。以下是函数的定义:
    function setSelection(selection any[] in)

    当调用setSelection函数时,需要从数据中选择需要选中的元素。下面这个示例代码中展示了两种设置方式:

    function start()
    
    	  grid.setSelection([grid.data[3], grid.data[2]]);
    
       // alternative coding
       myAny ANY[] = [grid.data[3], grid.data[2]];
       grid.setSelection(myAny);
    end
    

    设置选中行取决于DataGrid的selectionMode属性。例如,如果只能选择单行,则setSelection函数中选中的项目中只有第一个会被选中。

    • unCheckAll: 取消所有系统提供选择框中选择的项目。

    6. DataGrid Selection

    DataGrid控件有两种方式来表明某一行数据被关注:

    • 一种是选择某行,反选某行,或者获取当前选择的行。
    • 第二种机制是系统提供选择框的选择机制,支持选择,反选或者获取选中的项目。

    两种机制相互独立。首先,我们来看一下选择机制:

    • 四个函数可以被使用: setSelection, selectAll, deSelectAll, and getSelection。
    • selectionMode属性来控制DataGrid中的行是否可以被选中,如果可以,是否支持多选。
    • 当可以被选择时,listener方法用来对用户的选择操作进行响应,或者对setSelection, selectAll, or deSelectAll方法进行响应。
    • selectionListeners属性来记录所有listener方法。

    其次,我们来看一下选择框机制:

    • 四种方法可以被调用:setChecked, checkAll, unCheckAll, and getChecked.
    • 用户可以用代码来选择,清除或者对选择的行进行操作。这取决于showCheckBoxes属性是否被选中。
    • Listener方法可以用来响应用户的操作或者响应setChecked, checkAll, or unCheckAll等方法。
    • checkBoxListeners属性用来记录这些Listener方法。

     7. DataGrid分页机制

    在之前的章节中,我们已经介绍了DataGrid的所有属性。其中有三个属性影响DataGrid分页功能, pageSize,showButtonBar showScrollBar。你可以通过这三个属性来改变分页设置。本节中我们将通过一个简单的示例程序来展示分页机制。其中通过gotoPage 方法来在不同页面间切换,并且添加了一个pageChangeListener。

    package test;
    
    // RUI Handler
    
    import com.ibm.egl.rui.widgets.DataGrid;
    import data.GridEmployee;
    import com.ibm.egl.rui.widgets.Button;
    
    //
    //
    handler PageDemo type RUIhandler {initialUI = [ grid, FirstPage, Button, Button1, LastPage ],onConstructionFunction = start, title="PageDemo"}
    	
    	grid DataGrid {
    		id = "pageDemo", 
    		pageSize = 5,
    		margin = 20,
    		showButtonBar = false,
    		pageChangeListeners = [myPageChangeListener,myPageChangeListener1]		
    	};
    	FirstPage Button{ text = "FirstPage", onClick ::= FirstPage_onClick };
    	Button Button{ text = "Previous Page", onClick ::= Button_onClick };
    	Button1 Button{ text = "Next Page", onClick ::= Button1_onClick };
    	LastPage Button{ text = "Last Page", onClick ::= LastPage_onClick };
    	
    	function start()
    		data GridEmployee[0];
    		names String[] = [ "Jane", "Joe", "Mary", "Fred" ];
    		for (n int from 1 to 92)
    			data += new GridEmployee { 
    				id = n, age = 20 + n % 6,  name = names[1+n%4],home = n%2 == 1
    			};
    		end
    		data[2].name="";
    		data[4].name="";
    		grid.data = data as any[]; 
    	end
    	
    	function FirstPage_onClick(event Event in)
    		grid.gotoPage(1);
    	end	
    	
    	function Button_onClick(event Event in)
    		grid.gotoPage(grid.getCurrentPageIndex() - 1);
    	end
    	
    	function Button1_onClick(event Event in)
    		grid.gotoPage(grid.getCurrentPageIndex() + 1);
    	end
    	
    	function LastPage_onClick(event Event in)
    		grid.gotoPage(grid.getPageCount());
    	end
    	
    	function myPageChangeListener(grid DataGrid in, oldPageIndex int in, newPageIndex int in)
    		syslib.writeStdout("Page Change from " + oldPageIndex + " to "+ newPageIndex);
    	end
    	
    	function myPageChangeListener1(grid DataGrid in, oldPageIndex int in, newPageIndex int in)
    		syslib.writeStdout("The second page change listener is invoked");
    	end
    end
    

    8. Behavior示例

    之前的章节中,我们已经介绍过一些behaviors,headerBehaviors和editorBehaviors属性的知识。他们通过规定代理函数的格式来使用户遵循一定方式来编写单元格或者表头单元的行为函数。下面这个例子中,不同的列会用不同的控件来显示,并且每列的onChange操作的相应listener函数都不尽相同。


    package client;
    
    // RUI Handler
    
    import org.eclipse.edt.rui.widgets.Box;
    import org.eclipse.edt.rui.widgets.CheckBox;
    import org.eclipse.edt.rui.widgets.Combo;
    import org.eclipse.edt.rui.widgets.DataGrid;
    import org.eclipse.edt.rui.widgets.DataGridColumn;
    import org.eclipse.edt.rui.widgets.HTML;
    import org.eclipse.edt.rui.widgets.TextField;
    import eglx.java.class;
    import eglx.persistence.id;
    import eglx.persistence.sql.Column;
    import eglx.rbd.StrLib;
    import eglx.ui.rui.Event;
    import eglx.ui.rui.RUIHandler;
    import eglx.ui.rui.Widget;
    
    //
    //
    handler EditorBehaviorDemo type RUIhandler {initialUI = [ ui ],onConstructionFunction = start}
    	
    	grid DataGrid {
    		editorBehaviors = [myFunction],
    		id = "EditorBehaviorDemo", 
    		columns = [
    			new DataGridColumn { name = "id", displayName = "ID"},
    			new DataGridColumn { name = "age", displayName = "Age"},
    			new DataGridColumn { name = "name", displayName = "First Name"},
    			new DataGridColumn { name = "home", displayName = "@Home"}
    		],
    		pageSize = 7,
    		margin = 20
    	};
    	
    	html HTML = new HTML{ text = "<h3>EditorBehaviorDemo shows how to set cell widget for DataGrid.</h3><br/>" + 
    	"Enter row index and column index in the textfield, then click enable cell widget to toggle cell widget for the specified row/column <br/>" +
    	"Click Get Cell Widget, the age column of row 2 should have red background.<br/>" +
    	"The buttons should only affect 1 grid<br/>" + 
    	"The \"FirstName\" value in the first grid should be stored after paging and sorting"};
    	ui Box{ padding=8 ,columns=1, children=[ html, grid ]};
    	TextField1 TextField{maxlength=2,marginRight=12, width=10};
    	TextField2 TextField{maxlength=2,marginRight=12, width=10};
    	TextField3 TextField{maxlength=2,marginRight=12, width=10};
    	TextField4 TextField{maxlength=2,marginRight=12, width=10};
    	isActivated boolean = true;
    	
    	function start()
    		data GridEmployee[];
    		names String[] = [ "Jane", "Joe", "Mary", "Fred" ];
    		for (n int from 1 to 10)
    			data.appendElement(new GridEmployee { 
    				id = n, age = 20 + n % 6, name = names[1+n%3], home = n%2 == 1
    			});
    		end
    		grid.data = data as any[];
    	end
    	
    	function myFunction(grid DataGrid in, cell Widget in,rowData any in, rowIndex int in, column DataGridColumn in, value any in) returns (Widget) 
    		case(column.name)
    			when("name") 
    				combo Combo { values = [ "Jane", "Joe", "Mary", "Fred" ], onChange ::= handleComboChange };
    				selIndex int = 0;
    				for (n int from 1 to combo.values.getSize() by 1)
    					if (value as String == combo.values[n])
    						selIndex = n;
    						exit for;
    					end
    				end
    		 		combo.selection = selIndex;
    				return (combo);
    			when("age")
    				editor TextField { 
    					backgroundColor = "transparent",
    					borderWidth = 1,
    					padding = 0,
    					marginTop = -1,
    					marginBottom = -1,
    					text = value,
    					fontSize = "1.0em",
    					onChange ::= handleTextFieldChange,
    //					onFocusLost ::= textFieldFocusLost, 
    //					onKeyPress ::= textFieldKeyPress,
    					class = "EditableGridEditor"		
    				};
    				return (editor);
    			when("home")
    				editor CheckBox {
    					selected = (value as String == "true"),
    					onChange ::= handleCheckBoxChange,
    					class = "EditableGridCheckBox"		
    				};
    				return (editor);
    			otherwise
    				return (null);
    		end
    	end	
    	
    	function handleTextFieldChange(e Event in)
    		text TextField = e.widget;
    		cell Widget = text.parent;
    		rowNumber int = cell.getAttribute("row");			
    		columnNumber int = cell.getAttribute("column");
    		columnName String = strlib.lowerCase(grid.columns[columnNumber].name);
    		grid.data[rowNumber][columnName] = text.text;	
    	end
    	function handleCheckBoxChange(e Event in)
    		check CheckBox = e.widget;
    		cell Widget = check.parent;
    		rowNumber int = cell.getAttribute("row");			
    		columnNumber int = cell.getAttribute("column");
    		columnName String = strlib.lowerCase(grid.columns[columnNumber].name);
    		grid.data[rowNumber][columnName] = check.selected;	
    	end
    	function handleComboChange(e Event in)
    		combo Combo = e.widget;
    		cell Widget = combo.parent;
    		rowNumber int = cell.getAttribute("row");			
    		columnNumber int = cell.getAttribute("column");
    		columnName String = strlib.lowerCase(grid.columns[columnNumber].name);
    		grid.data[rowNumber][columnName] = combo.values[combo.selection];	
    	end
    end
    


    9. DataGrid Tooltips

    如果你需要为DataGrid添加tooltip,你可以通过如下两种方式:

    • 如果你需要不论鼠标停留在DataGrid的哪里,都显示同样的tooltip的话。你可以通过声明一个全局的tooltip控件,并且在某些方法中激活它。例如在on-construction函数中或者behaviors,headerBehaviors属性函数中。
    • 如果你想在不同单元格,行或者列显示不同的tooltips的话,你可以使用DataGrid tooltip,它和tooltip控件类似但是却总是需要指定Grid-tooltip提供函数。这个函数将会返回一个box控件,其中包括需要显示的tooltip信息。

    以下是创建DataGrid tooltip的过程:

    • 声明一个DataGridTooltip,其中包含一个Grid-tooltip提供函数和一个延时属性来表明当鼠标悬停多久以后会触发Tooltip:
    gridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 };

    你需要import相应的控件:

    import egl.rui.widgets.DataGridToolTip;
    • 当为behaviors属性赋值一个数组时需要调用Grid-tooltip的一个函数。本例中,这个函数是gridTooltip.setToolTips。
    • 创建一个与DataGridToolTip的provider属性相同的函数。这个函数需要遵循如下代理函数定义:
    Delegate DataGridTooltipTextProvider(rowData any in, fieldName String in,  td Widget in) returns(Box)   
    end

    row

    提供到函数中的行信息。你可以通过输入值来访问特定的值。考虑如下数据定义:

    stocks Stock[] = [
    		 new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false}, 
    		 new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false}
    	]; 
    

    在provider函数中,你可以判断哪一行是鼠标停留的地方:

    if (rowData.Quote as int == 200)
       // place content in a box (the tooltip) and return the tooltip
    end
    

    fieldname 为函数提供的列数据

    td         一个内部空间来展示Grid单元格

    • 你不需要开启DataGrid tooltip;他会在声明时自动被开启。



























    展开全文
  • EasyUI入门(DataGrid

    千次阅读 2018-10-14 21:19:45
    DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列...

                DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

    一.创建DataGrid(数据网格)

    1.通过table表来创建datagrid

                既然是数据网格,网格也就是tabel表,所以我们可以通过html页面中已存在的table表来创建数据网格。从现有的表格元素创建DataGrid,在HTML中定义列、行和数据。

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>EasyUI入门</title>
    <!-- 在head中引入必要的js文件和css文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>
    
    <script type="text/javascript">
    	$(function(){
    	
    	});
    </script>	
    </head>
    <body>   
        <table class="easyui-datagrid">   
    	    <thead>   
    	        <tr>   
    	            <th data-options="field:'code'">编码</th>   
    	            <th data-options="field:'name'">名称</th>   
    	            <th data-options="field:'price'">价格</th>   
    	        </tr>   
    	    </thead>   
    	    <tbody>   
    	        <tr>   
    	            <td>001</td><td>name1</td><td>2323</td>   
    	        </tr>   
    	        <tr>   
    	            <td>002</td><td>name2</td><td>4612</td>   
    	        </tr>   
    	    </tbody> 
    	      
    </table>  
      
    </body>  
    </html>

                      Html页面中的table表有tfoot属性,我尝试着在datagrid中添加一个tfoot标签,但是在页面效果中并没有显示。

                      这里的<thead>标签中的<tr>中的<th>(注意是th而不是td)标签中的field字段用来接收从后台传来的值,只有这个field字段和后台的字段值一样,才能将数据填充到datagrid中。

                      页面效果图:

                    既然我们是通过html页面中已存在的table表来创建的datagrid的,所以我们可以通过这个table的style来指定这个表的宽和高,也就是指定这个datagrid的宽和高。如果我们没有指定,那么高度会自适应,而宽度为整个屏幕。如果我们在style属性中指定宽和高,那么一定要在height和width属性后面的长度后面加上 px ,如200px,150px,如果不加上px,那么不会显示出效果的。这个datagrid和input标签一样,只要初始化了宽和高,那么就不会发生改变,即使datagrid的面积不够数据显示的,那么数据会被hidden掉,而不是将宽和高的值变大从而显示所有数据。

                    我们再来看一个Demo。

                    通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>EasyUI入门</title>
    <!-- 在head中引入必要的js文件和css文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>
    
    <script type="text/javascript">
    	$(function(){
    	
    	});
    </script>	
    </head>
    <body>   
       <table class="easyui-datagrid" style="width:400px;height:250px"   
            data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
    	    <thead>   
    	        <tr>   
    	            <th data-options="field:'code',width:50">编码</th>   
    	            <th data-options="field:'name',width:50">名称</th>   
    	            <th data-options="field:'price',width:50,align:'right'">价格</th> 
    	            <th data-options="field:'price',width:50,align:'right'">品质</th>   
    	        </tr>   
    	    </thead>
    	    <tbody>
    	    	<tr>   
    	            <td >111111111</td><td >1111111111111122222222222222222222222222</td> <td >1111111111</td> <td >11111111</td> <td >1111111111111111111</td>      
    	        </tr> 
    	        <tr>   
    	            <td >1</td><td >1</td> <td >1</td> <td >1</td> <td >1</td>      
    	        </tr> 
    	        <tr>   
    	            <td >1</td><td >1</td> <td >1</td> <td >1</td> <td >1</td>      
    	        </tr> 
    	    </tbody>   
       </table>
    	      
    </body>  
    </html>

                      页面效果图:

                        从这个小Demo中我们可以看到:我们是可以通过style来定义datagrid的大小的,通过data-options中的属性来定义单元格的大小,但是这有一个问题,在table表中的data-options中有一个属性fitColumns:true,当它为true时,是自适应datagrid的大小的,也就是说列的宽度会自适应datagrid大小,这样的话在 <th>标签中定义的单元格大小就没有意义了,只有将fitColumns:false设置为false,才会在页面显示自定义的单元格大小。   并且我们好像不能通过height属性来设置datagrid中单元格的高。

    2.使用Javascript去创建DataGrid控件

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>EasyUI入门</title>
    <!-- 在head中引入必要的js文件和css文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>
    
    <script type="text/javascript">
    	$(function(){
    		$('#dg').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>	
    </head>
    <body>   
      <table id="dg">
      		<!-- 如果这块不写的话,只会显示标题 ,并且由于在上方script中定义了thead,所以在table里在定义一个thead是没有意义的,
      			 当然在页面中也是没有效果的。
      		-->
      		<tbody>
      			<tr><td>1</td><td>2</td><td>3</td></tr>
      		</tbody>
      </table>
    </body>  
    </html>

                    页面效果图:

                    由于没有连接后台,所以对于datagrid来说非常重要的3个方法load()方法,reload()方法,loadData() 是没有办法测试的。

                    并且,当我们在定义表的thead的时候,tr里面的标签用的是th标签,这样是能正确显示table中每列的标题的,但是如果把th换成td标签,那么将不会显示效果,也就是说,必须要用th标签,而不可以用td标签。

    3.列属性

                    DataGrid列是一个数组对象,该元素也是一个数组对象。元素数组里面的元素是一个配置对象,它用来定义每一个列字段。       

                     我们看一下最简单的列数组:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>EasyUI入门</title>
    <!-- 在head中引入必要的js文件和css文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>
    
    <script type="text/javascript">
    	$(function(){
    		$('#dg').datagrid({    
    		    url:'datagrid_data.json',    
    		    columns:[[    
    		        {field:'itemid',title:'Item ID',width:80,sortable:true},    
    		        {field:'productid',title:'Product ID',width:80,sortable:true},    
    		        {title:'Item Details'}    
    		    ],[    
    		        {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}    
    		    ]]      
    		});  
    	});
    	   
    </script>	
    </head>
    <body>   
     <table id="dg"></table>  
    </body>  
    </html>

                       效果演示图:

                       我们可以看到第一个列数组显示在第一行,第二个列数组显示在第一行的下面,并且拥有sortable:true的属性的列在列名右面有一个上下的小箭头用于排序。

                       下面我们再来看一下合并行和列的列数组集合:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>EasyUI入门</title>
    <!-- 在head中引入必要的js文件和css文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>
    
    <script type="text/javascript">
    	$(function(){
    		$('#dg').datagrid({    
    		    url:'datagrid_data.json',    
    		    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}    
    		    ]]      
    		});  
    	});
    	   
    </script>	
    </head>
    <body>   
     <table id="dg"></table>  
    </body>  
    </html>

                         页面效果图:

     

                         这个效果就和上面的不同了。原理就是原本第二行的数组标题应该对应着 第一行的数组标题,但是由于第一个数组标题的第一列和第二列合并了2行,所以相应的,就把第二行的数组标题 “挤”到了右面,应该是List Price列对应Item Details列,其他的列依次向右。而Item Details这时占了4列,所以,第二行数组标题就全都在Item Details列下,也就出现了如上图的页面效果。(如果不理解可以拷贝代码,然后删除某一个rowspan属性或者colspan属性在看效果,这样就很明显看出是怎么布局的了)

                         Over-------------------------------

    展开全文
  • DataGrid

    2017-10-12 09:27:53
    http://www.jeasyui.com/documentation/datagrid.php Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults. ...The datagrid displays data in a tabular format and offers rich sup

    http://www.jeasyui.com/documentation/datagrid.php

    Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults.

    The datagrid displays data in a tabular format and offers rich support to select, sort, group and edit data. The datagrid has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich. Cell merging, multi-column headers, frozen columns and footers are just a few of its features.

    Dependencies

    • panel
    • resizable
    • linkbutton
    • pagination

    Usage Example

    Create datagrid from an existing table element, defining columns, rows, and data in html.

    1. <table class="easyui-datagrid">
    2. <thead>
    3. <tr>
    4. <th data-options="field:'code'">Code</th>
    5. <th data-options="field:'name'">Name</th>
    6. <th data-options="field:'price'">Price</th>
    7. </tr>
    8. </thead>
    9. <tbody>
    10. <tr>
    11. <td>001</td><td>name1</td><td>2323</td>
    12. </tr>
    13. <tr>
    14. <td>002</td><td>name2</td><td>4612</td>
    15. </tr>
    16. </tbody>
    17. </table>

    Create datagrid via <table> markup. The nested <th> tags define the columns on the table.

    1. <table class="easyui-datagrid" style="width:400px;height:250px"
    2. data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    3. <thead>
    4. <tr>
    5. <th data-options="field:'code',width:100">Code</th>
    6. <th data-options="field:'name',width:100">Name</th>
    7. <th data-options="field:'price',width:100,align:'right'">Price</th>
    8. </tr>
    9. </thead>
    10. </table>

    Create datagrid using javascript is also allowed.

    1. <table id="dg"></table>
    1. $('#dg').datagrid({
    2. url:'datagrid_data.json',
    3. columns:[[
    4. {field:'code',title:'Code',width:100},
    5. {field:'name',title:'Name',width:100},
    6. {field:'price',title:'Price',width:100,align:'right'}
    7. ]]
    8. });

    Query data with some parameters.

    1. $('#dg').datagrid('load', {
    2. name: 'easyui',
    3. address: 'ho'
    4. });

    After changing data to server, refresh the front data.

    1. $('#dg').datagrid('reload'); // reload the current page data

    DataGrid Properties

    The properties extend from panel. below is the added properties for datagrid.

    Name Type Description Default
    columns array The datagrid columns config object, see column properties for more details. undefined
    frozenColumns array Same as the columns property, but the these columns will be frozen on left. undefined
    fitColumns boolean True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling. false
    resizeHandle string Resizing column position, Available value are: 'left','right','both'. When 'right', users can resize columns by dragging the right edge of column headers, etc.
    Available since version 1.3.2.
    right
    resizeEdge number The resizing column edge. Available since version 1.5.3. 5
    autoRowHeight boolean Defines if set the row height based on the contents of that row. Set to false can improve loading performance. true
    toolbar array,selector The top toolbar of datagrid panel. Possible values:
    1) an array, each tool options are same as linkbutton.
    2) a selector that indicate the toolbar.

    Define toolbar within a <div> tag:

    $('#dg').datagrid({
    	toolbar: '#tb'
    });
    <div id="tb">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
    </div>
    

    Define toolbar via array:

    $('#dg').datagrid({
    	toolbar: [{
    		iconCls: 'icon-edit',
    		handler: function(){alert('edit')}
    	},'-',{
    		iconCls: 'icon-help',
    		handler: function(){alert('help')}
    	}]
    });
    
    null
    striped boolean True to stripe the rows. false
    method string The method type to request remote data. post
    nowrap boolean True to display data in one line. Set to true can improve loading performance. true
    idField string Indicate which field is an identity field. null
    url string A URL to request data from remote site. null
    data array,object The data to be loaded. Available since version 1.3.2.

    Code example:

    $('#dg').datagrid({
    	data: [
    		{f1:'value11', f2:'value12'},
    		{f1:'value21', f2:'value22'}
    	]
    });
    
    null
    loadMsg string When loading data from remote site, show a prompt message. Processing, please wait …
    emptyMsg string The message to be shown when no records exist.  
    pagination boolean True to show a pagination toolbar on datagrid bottom. false
    rownumbers boolean True to show a row number column. false
    singleSelect boolean True to allow selecting only one row. false
    ctrlSelect boolean True to only allow multi-selection when ctrl+click is used. Available since version 1.3.6. false
    checkOnSelect boolean If true, the checkbox is checked/unchecked when the user clicks on a row. If false, the checkbox is only checked/unchecked when the user clicks exactly on the checkbox.
    Available since version 1.3.
    true
    selectOnCheck boolean If set to true, clicking a checkbox will always select the row. If false, selecting a row will not check the checkbox.
    Available since version 1.3.
    true
    scrollOnSelect boolean If set to true, scroll to the row automatically when selecting it. Available since version 1.5.2. true
    pagePosition string Defines position of the pager bar. Available values are: 'top','bottom','both'.
    Available since version 1.3.
    bottom
    pageNumber number When set pagination property, initialize the page number. 1
    pageSize number When set pagination property, initialize the page size. 10
    pageList array When set pagination property, initialize the page size selecting list. [10,20,30,40,50]
    queryParams object When request remote data, sending additional parameters also.

    Code example:

    $('#dg').datagrid({
    	queryParams: {
    		name: 'easyui',
    		subject: 'datagrid'
    	}
    });
    
    {}
    sortName string Defines which column can be sorted. null
    sortOrder string Defines the column sort order, can only be 'asc' or 'desc'. asc
    multiSort boolean Defines if to enable multiple column sorting. Available since version 1.3.4. false
    remoteSort boolean Defines if to sort data from server. true
    showHeader boolean Defines if to show row header. true
    showFooter boolean Defines if to show row footer. false
    scrollbarSize number The scrollbar width(when scrollbar is vertical) or height(when scrollbar is horizontal). 18
    rownumberWidth number The width of the row number column. Available since version 1.5. 30
    editorHeight number The default height of the editors. 24
    rowStyler function Return style such as 'background:red'. The function take two parameters:
    rowIndex: the row index, start with 0
    rowData: the record corresponding to this row

    Code example:

    $('#dg').datagrid({
    	rowStyler: function(index,row){
    		if (row.listprice>80){
    			return 'background-color:#6293BB;color:#fff;'; // return inline style
    			// the function can return predefined css class and inline style
    			// return {class:'r1', style:{'color:#fff'}};	
    		}
    	}
    });
    
     
    loader function Defines how to load data from remote server. Return false can abort this action. This function takes following parameters:
    param: the parameter object to pass to remote server.
    success(data): the callback function that will be called when retrieve data successfully.
    error(): the callback function that will be called when failed to retrieve data.
    json loader
    loadFilter function Return the filtered data to display. The function take one parameter 'data' that indicate the original data. You can change original source data to standard data format. This function must return standard data object that contain 'total' and 'rows' properties.

    Code example:

    // removing 'd' object from asp.net web service json output
    $('#dg').datagrid({
    	loadFilter: function(data){
    		if (data.d){
    			return data.d;
    		} else {
    			return data;
    		}
    	}
    });
    
     
    editors object Defines the editor when editing a row. predefined editors
    view object Defines the view of datagrid. default view

    Column Properties

    The DataGrid Columns is an array object, which element is an array too. The element of element array is a config object, which defines every column field.

    Code example:

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

    Name Type Description Default
    title string The column title text. undefined
    field string The column field name. undefined
    width number The width of column. If not defined, the width will auto expand to fit its contents. No width definition will reduce performance. undefined
    rowspan number Indicate how many rows a cell should take up. undefined
    colspan number Indicate how many columns a cell should take up. undefined
    align string Indicate how to align the column data. 'left','right','center' can be used. undefined
    halign string Indicate how to align the column header. Possible values are: 'left','right','center'. If not assigned, the header alignment is same as data alignment defined via 'align' property. Available since version 1.3.2. undefined
    sortable boolean True to allow the column can be sorted. undefined
    order string The default sort order, can only be 'asc' or 'desc'. Available since version 1.3.2. undefined
    resizable boolean True to allow the column can be resized. undefined
    fixed boolean True to prevent from adjusting width when 'fitColumns' is set to true. undefined
    hidden boolean True to hide the column. undefined
    checkbox boolean True to show a checkbox. The checkbox column has fixed width. undefined
    formatter function The cell formatter function, take three parameters:
    value: the field value.
    rowData: the row record data.
    rowIndex: the row index.

    Code example:

    $('#dg').datagrid({
    	columns:[[
    		{field:'userId',title:'User', width:80,
    			formatter: function(value,row,index){
    				if (row.user){
    					return row.user.name;
    				} else {
    					return value;
    				}
    			}
    		}
    	]]
    });
    
    undefined
    styler function The cell styler function, return style string to custom the cell style such as 'background:red'. The function take three parameter:
    value: the field value.
    rowData: the row record data.
    rowIndex: the row index.

    Code example:

    $('#dg').datagrid({
    	columns:[[
    		{field:'listprice',title:'List Price', width:80, align:'right',
    			styler: function(value,row,index){
    				if (value < 20){
    					return 'background-color:#ffee00;color:red;';
    					// the function can return predefined css class and inline style
    					// return {class:'c1',style:'color:red'}
    				}
    			}
    		}
    	]]
    });
    
    undefined
    sorter function The custom field sort function that used to do local sorting, take two parameters:
    a: the first field value.
    b: the second field value.

    Code example:

    $('#dg').datagrid({
    	remoteSort: false,
    	columns: [[
    		{field:'date',title:'Date',width:80,sortable:true,align:'center',  
    			sorter:function(a,b){  
    				a = a.split('/');  
    				b = b.split('/');  
    				if (a[2] == b[2]){  
    					if (a[0] == b[0]){  
    						return (a[1]>b[1]?1:-1);  
    					} else {  
    						return (a[0]>b[0]?1:-1);  
    					}  
    				} else {  
    					return (a[2]>b[2]?1:-1);  
    				}  
    			}  
    		}
    	]]
    });
    
    undefined
    editor string,object Indicate the edit type. When string indicates the edit type, when object contains two properties:
    type: string, the edit type, possible types are: text,textbox,numberbox,numberspinner, combobox,combotree,combogrid,datebox,datetimebox, timespinner,datetimespinner, textarea,checkbox,validatebox.
    options: object, the editor options corresponding to the edit type.
    undefined

    Editor

    Override defaults with $.fn.datagrid.defaults.editors.

    Every editor has following actions:

    Name Parameters Description
    init container, options Initialize the editor and return the target object.
    destroy target Destroy the editor if necessary.
    getValue target Get value from editor text.
    setValue target , value Set value for editor.
    resize target , width Resize the editor if necessary.

    For example, the text editor is defined as following:

    1. $.extend($.fn.datagrid.defaults.editors, {
    2. text: {
    3. init: function(container, options){
    4. var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
    5. return input;
    6. },
    7. destroy: function(target){
    8. $(target).remove();
    9. },
    10. getValue: function(target){
    11. return $(target).val();
    12. },
    13. setValue: function(target, value){
    14. $(target).val(value);
    15. },
    16. resize: function(target, width){
    17. $(target)._outerWidth(width);
    18. }
    19. }
    20. });

    DataGrid View

    Override defaults with $.fn.datagrid.defaults.view.

    The view is an object that will tell datagrid how to render rows. The object must defines the following functions:

    Name Parameters Description
    render target, container, frozen Called when the data is loaded.
    target: DOM object, the datagrid object.
    container: the rows container.
    frozen: indicate if to render the frozen container.
    renderFooter target, container, frozen This is an option function to render row footer.
    renderRow target, fields, frozen, rowIndex, rowData This is an option function and will be called by render function.
    refreshRow target, rowIndex Defines how to refresh the specified row.
    onBeforeRender target, rows Fires before the view is rendered.
    onAfterRender target Fires after the view is rendered.

    Events

    The events extend from panel, below is the added events for datagrid.

    Name Parameters Description
    onLoadSuccess data Fires when data is loaded successfully.
    onLoadError none Fires when some errors occur to load remote data.
    onBeforeLoad param Fires before a request is made to load data. If return false the load action will be canceled.
    onClickRow index,row Fires when the user clicks a row, the parameters contains:
    index: the clicked row index, start with 0
    row: the record corresponding to the clicked row
    onDblClickRow index,row Fires when the user double clicks a row, the parameters contains:
    index: the clicked row index, start with 0
    row: the record corresponding to the clicked row
    onClickCell index,field,value Fires when the user clicks a cell.
    onDblClickCell index,field,value Fires when the user double clicks a cell.

    Code example:

    // when double click a cell, begin editing and make the editor get focus
    $('#dg').datagrid({
    	onDblClickCell: function(index,field,value){
    		$(this).datagrid('beginEdit', index);
    		var ed = $(this).datagrid('getEditor', {index:index,field:field});
    		$(ed.target).focus();
    	}
    });
    
    onBeforeSortColumn sort,order Fires before the user sorts a column, return false to cancel this action. Available since version 1.3.6.
    onSortColumn sort,order Fires when the user sorts a column, the parameters contains:
    sort: the sort column field name
    order: the sort column order
    onResizeColumn field,width Fires when the user resizes the column.
    onBeforeSelect index,row Fires before the user selects a row, return false to cancel this action. Available since version 1.4.1.
    onSelect index,row Fires when the user selects a row, the parameters contains:
    index: the selected row index, start with 0
    row: the record corresponding to the selected row
    onBeforeUnselect index,row Fires before the user unselects a row, return false to cancel this action. Available since version 1.4.1.
    onUnselect index,row Fires when the user unselects a row, the parameters contains:
    index: the unselected row index, start with 0
    row: the record corresponding to the unselected row
    onSelectAll rows Fires when the user selects all rows.
    onUnselectAll rows Fires when the user unselects all rows.
    onBeforeCheck index,row Fires before the user checks a row, return false to cancel this action. Available since version 1.4.1.
    onCheck index,row Fires when the user checks a row, the parameters contains:
    index: the checked row index, start with 0
    row: the record corresponding to the checked row
    Available since version 1.3.
    onBeforeUncheck index,row Fires before the user unchecks a row, return false to cancel this action. Available since version 1.4.1.
    onUncheck index,row Fires when the user unchecks a row, the parameters contains:
    index: the unchecked row index, start with 0
    row: the record corresponding to the unchecked row
    Available since version 1.3.
    onCheckAll rows Fires when the user checks all rows. Available since version 1.3.
    onUncheckAll rows Fires when the user unchecks all rows. Available since version 1.3.
    onBeforeEdit index,row Fires before the user starts editing a row, return false to cancel this action. The parameters contains:
    index: the editing row index, start with 0
    row: the record corresponding to the editing row
    onBeginEdit index,row Fires when a row goes into edit mode. Available since version 1.3.6.
    onEndEdit index,row,changes Fires when finishing editing but before destroying editors. Available since version 1.3.6.
    onAfterEdit index,row,changes Fires after the user finishes editing, the parameters contains:
    index: the editing row index, start with 0
    row: the record corresponding to the editing row
    changes: the changed field/value pairs
    onCancelEdit index,row Fires when the user cancels editing a row, the parameters contains:
    index: the editing row index, start with 0
    row: the record corresponding to the editing row
    onHeaderContextMenu e,field Fires when the header of datagrid is right clicked.
    onRowContextMenu e,index,row Fires when a row is right clicked.

    Methods

    Name Parameter Description
    options none Return the options object.
    getPager none Return the pager object.
    getPanel none Return the panel object.
    getColumnFields frozen Return the column fields. If frozen setted to true the frozen column fields is returned.
    Code example:
    var opts = $('#dg').datagrid('getColumnFields');	// get unfrozen columns
    var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
    
    getColumnOption field Return the specified column option.
    resize param Do resize and do layout.
    load param Load and show the first page rows. If the 'param' is specified, it will replace with the queryParams property. Usually do a query by passing some parameters, this method can be called to load new data from server.
    $('#dg').datagrid('load',{
    	code: '01',
    	name: 'name01'
    });
    
    reload param Reload the rows. Same as the 'load' method but stay on current page.
    reloadFooter footer Reload the footer rows. Code examples:
    // update footer row values and then refresh
    var rows = $('#dg').datagrid('getFooterRows');
    rows[0]['name'] = 'new name';
    rows[0]['salary'] = 60000;
    $('#dg').datagrid('reloadFooter');
    
    // update footer rows with new data
    $('#dg').datagrid('reloadFooter',[
    	{name: 'name1', salary: 60000},
    	{name: 'name2', salary: 65000}
    ]);
    
    loading none Display loading status.
    loaded none Hide loading status.
    fitColumns none Make columns auto expand/collapse to fit datagrid width.
    fixColumnSize field Fix columns size. If 'field' parameter is not assigned, all columns size will be fixed.

    Code example:

    $('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size
    $('#dg').datagrid('fixColumnSize');  // fix all columns size
    
    fixRowHeight index Fix the specified row height. If 'index' parameter is not assigned, all rows height will be fixed.
    freezeRow index Freeze the specify row that will always be displayed at the top when the datagrid is scrolled down. Available since version 1.3.2.
    autoSizeColumn field adjusts the column width to fit the contents. Available since version 1.3.
    loadData data Load local data, the old rows will be removed.
    getData none Return the loaded data.
    getRows none Return the current page rows.
    getFooterRows none Return the footer rows.
    getRowIndex row Return the specified row index, the row parameter can be a row record or an id field value.
    getChecked none Return all rows where the checkbox has been checked. Available since version 1.3.
    getSelected none Return the first selected row record or null.
    getSelections none Return all selected rows, when no record selected, an empty array will return.
    clearSelections none Clear all selections.
    clearChecked none Clear all checked rows. Available since version 1.3.2.
    scrollTo index Scroll to the specified row. Available since version 1.3.3.
    gotoPage param Go to the specified page. Available since version 1.4.4.

    Usage example:

    // go to page 3
    $('#dg').datagrid('gotoPage', 3);
    
    // go to page 3 with callback
    $('#dg').datagrid('gotoPage', {
    	page: 3,
    	callback: function(page){
    		console.log(page)
    	}
    })
    
    highlightRow index Highlight a row. Available since version 1.3.3.
    selectAll none Select all current page rows.
    unselectAll none Unselect all current page rows.
    selectRow index Select a row, the row index start with 0.
    selectRecord idValue Select a row by passing id value parameter.
    unselectRow index Unselect a row.
    checkAll none Check all current page rows. Available since version 1.3.
    uncheckAll none Uncheck all current page rows. Available since version 1.3.
    checkRow index Check a row, the row index start with 0. Available since version 1.3.
    uncheckRow index Uncheck a row, the row index start with 0. Available since version 1.3.
    beginEdit index Begin editing a row.
    endEdit index End editing a row.
    cancelEdit index Cancel editing a row.
    getEditors index Get the specified row editors. Each editor has the following properties:
    actions: the actions that the editor can do, same as the editor definition.
    target: the target editor jQuery object.
    field: the field name.
    type: the editor type, such as 'text','combobox','datebox', etc.
    getEditor options Get the specified editor, the options contains two properties:
    index: the row index.
    field: the field name.

    Code example:

    // get the datebox editor and change its value
    var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
    $(ed.target).datebox('setValue', '5/4/2012');
    
    refreshRow index Refresh a row.
    validateRow index validate the specified row, return true when valid.
    updateRow param Update the specified row, the param contains following properties:
    index: the row index to be updated.
    row: the new row data.

    Code example:

    $('#dg').datagrid('updateRow',{
    	index: 2,
    	row: {
    		name: 'new name',
    		note: 'new note message'
    	}
    });
    
    appendRow row Append a new row. The new row will be added to the last position:
    $('#dg').datagrid('appendRow',{
    	name: 'new name',
    	age: 30,
    	note: 'some messages'
    });
    
    insertRow param Insert a new row, the param contains following properties:
    index: the row index to insert into, if not defined, append the new row.
    row: the row data. Code examples:
    // insert a new row at second row position
    $('#dg').datagrid('insertRow',{
    	index: 1,	// index start with 0
    	row: {
    		name: 'new name',
    		age: 30,
    		note: 'some messages'
    	}
    });
    
    deleteRow index Delete a row.
    getChanges type Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
    acceptChanges none Commits all the changes data since it was loaded or since the last time acceptChanges was called.
    rejectChanges none Rolls back all the changes data since it was created, or since the last time acceptChanges was called.
    mergeCells options Merge some cells to one cell, the options contains following properties:
    index: the row index.
    type: the row type, possible values are 'body','footer'.
    field: the field name.
    rowspan: the rowspan count to be merged.
    colspan: the colspan count to be merged.

    Code example:

    // merge the footer rows
    $('#dg').datagrid('mergeCells', {
    	index: 1,
    	field: 'name',
    	colspan: 2,
    	type: 'footer'
    });
    
    showColumn field Display the specified column.
    hideColumn field Hide the specified column.
    sort param Sort the datagrid. Available since version 1.3.6.

    Code example:

    // sort on a column
    $('#dg').datagrid('sort', 'itemid');
    // sort on a column with specified order
    $('#dg').datagrid('sort', {
    	sortName: 'productid',
    	sortOrder: 'desc'
    });
    // sort on multiple columns
    $('#dg').datagrid('sort', {
    	sortName: 'productid,listprice',
    	sortOrder: 'desc,asc'
    });
    
    展开全文
  • EasyUI之datagrid展示数据列表

    万次阅读 多人点赞 2018-05-05 00:44:10
    写在最前: 如果你用惯了Web Mvc框架的视图跳转方式来开发后台系统,第一次接触到EasyUI的时候,往往会有一个大大的疑问,这EasyUI是如何做跳转的啊?增删改查都不知道如何下手了!但是当你知道有RestFul编程的时候...
  • datagrid

    2020-07-30 23:33:20
    NULL 博文链接:https://baobeituping.iteye.com/blog/781987
  • js之datagrid

    千次阅读 2017-12-28 09:25:10
    1 js中的datagrid需要添加两个css和两个js, 如: 顺序不要颠倒,不然会出错。 而且需要将jsp语法去掉,例如去掉: 2js中的datagrid是从后台得到json类型的数据,json类型的数据必须是像这样...
  • datagrid使用方法(重要)

    万次阅读 2018-07-11 10:23:00
    1、将静态HTML渲染为datagrid样式 &...easyui-datagrid"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th data-options="field:'id'"&gt;编号&lt;/th&gt;
  • WPF之DataGrid应用

    万次阅读 多人点赞 2015-12-21 14:15:10
    前几天打算尝试下DataGrid的用法,起初以为应该很简单,可后来被各种使用方法和功能实现所折磨。网络上的解决方法太多,但也太杂。没法子,我只好硬着头皮阅览各种文献资料,然后不断的去尝试,总算小有成果。因此,...
  • easyui datagrid 表格 属性和方法

    万次阅读 2019-11-29 07:36:54
    使用方法(Usage Example) 从现有的表单元素创建数据表格,定义在html中的行,列和... <tableclass="easyui-datagrid"> <thead> <tr> <thdata-options="field:'code'">Code</th>...
  • easyui datagrid 扩展

    千次阅读 2016-02-22 17:06:58
    本人一向是主张前端不要用什么框架,主要是引文框架的灵活性不大,而且臃肿。 最近公司在开发一个产品,先说说团队成员吧:4个开发(其中包含我)、一个项目经理、2个对业务比较熟悉的老总,没了,这个是我最不想的...
  • EasyUi Datagrid的基础使用

    万次阅读 多人点赞 2015-04-15 10:28:14
    Datagride的初始化方式 方式1 :class类型创建,这个创建方式比较简单,如果在已知表格内容的情况下可以使用,还是挺漂亮的 Code Name Price 001n
  • easyui datagrid表格嵌套子表

    千次阅读 2020-01-10 11:48:42
    1.源码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">...meta name="keywords" content="jquery,ui,easy,easyui,web">...meta name="descriptio...
  • DataGrid/DataList

    千次阅读 2004-10-24 22:55:00
    很久以前就想写一些关于DataGrid/DataList的东西,但是一直以来,一方面自感所学未深,另一方面,总觉无从下笔,一拖再拖,离刚开始的念头已距一年有余。DataGrid/DataList在ASP.NET中的重要性,想必就不用我再强调...
  • DataGrid方法标注

    千次阅读 2013-10-30 12:18:09
    在VS2010中无法增加了CColumn和Ccolumns类 解决方案,方案名->右击->添加类->ActiveX控件中的MFC类->添加弹出了“从ActiveX控件添加类向导,然后选择”文件“->位置处填写你所添加的控件的.Ocx文件(C:\WINDOWS\...
  • 一、需要引入的文件 <link href="${ctxStatic}/easyui/css/easyui.css" rel="stylesheet" /> <link href="${ctxStatic}/easyui/css/icon.css" rel="stylesheet" /> <script src="${ctxStatic}/...
  • FLEX 中的DataGrid使用

    万次阅读 2010-09-01 16:53:00
    Flex教程/组件详解之一:DataGrid(1-2) 今天来介绍一个DataGrid的使用,DataGrid是基于列表的控件,以表格的形式输出数据,可以当他是一个多列的list. 我们将从建立、数据填充、取值、删除、拖拽(?...
  • jquery datagrid 参数及使用

    万次阅读 2017-08-14 14:33:58
    数据表格 - DataGrid内容概况 使用方法 数据表格属性 数据列属性 编辑 数据视图 事件 方法 继承.fn.panel.defaults,使用.fn.panel.defaults,使用.fn.datagrid.defaults重载默认值。.数据表格显示的数据以...
  • 有关WPF中DataGrid控件的基础应用总结

    万次阅读 多人点赞 2018-11-12 10:06:01
    DataGrid是WPF提供的基础控件,它可以非常轻松的呈现出一张表格,本文章会按照从易到难的顺序依次将DataGrid的使用方法进行解说,除了MSDN上给出的最基本的例子之外,给出了三个比较常见的在真实使用场景下使用的...
  • 项目中用到DataGrid, 需要在第一列添加checkbox, 可以多选、全选。 其中涉及的概念DataTemplate, DataGridCellStyle, DataGridCellControlTemplate,Binding, OnPropertyChanged等。 有下面是实现思路: ...
1 2 3 4 5 ... 20
收藏数 85,785
精华内容 34,314
关键字:

datagrid