EasyUI常用控件

一：combox使用

http://www.runoob.com/jeasyui/jeasyui-form-form4.html

http://www.runoob.com/jeasyui/plugins-form-combobox.html

combox为下拉列表控件，可以使用定量数据直接显示，也可以通过访问后台获取显示数据。显示内容可以包含图片文字。除此之外，使用其属性可以实现多框关联，数据过滤显示。

常用属性：valueField，textField，url：parent.formateUrl（），formatter

方法：onBeforeLoad，onSelect：实现多个combox的关联显示

1.直接显示定量数据

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
</select>

2.异步加载数据，方法一：HTML

<input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:'id',textField:'text',url:'get_data.php'">data-options="valueField:'id',textField:'text',url:'get_data.php'">

方法二：HTML+JavaScript

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

二：datagrid

http://www.runoob.com/jeasyui/plugins-dt-datagrid.html

datagrid为数据网格插件，用网格来逐条显示数据，显示数据多样，可以奇偶变色，特定变色，分页显示，过滤等。

此外还可以设置点击触发事件。

columns：使用formatter函数可以过滤，可以显示触发键“<a href=' javascript:function() '>..</a>”。

1.常见属性：iconCls:'icon-save'，height/width:$（window）.height/width-10

idField：true

nowrap：：设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。

striped：设置为 true，则把行条纹化。

fitColumns：设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度

romoteShort：定义是否从服务器排序数据

url，idField，singleSelect：设置为 true，则只允许选中一行

pagination：定义分页栏的位置。可用的值有：'top'、'bottom'、'both'

rownumbers：设置为 true，则显示带有行号的列

2.带参加载：

$('#dg').datagrid({
    queryParams: {
        name: 'easyui',
        subject: 'datagrid'
    }
});

3.方法：load，reload，带参重新加载

 

$('#dg').datagrid('load',{
    code: '01',
    name: 'name01'
});

4.columns：表格显示

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}
]]sortable:true},
    {title:'Item Details',colspan:4}
]]

field，title，width，align：'left'

formatter：数据整理

$('#dg').datagrid({
    columns:[[
        {field:'userId',title:'User', width:80,
            formatter: function(value,row,index){
                if (row.user){
                    return row.user.name;
                } else {
                    return value;
                }
            }
        }
    ]]
});

5.数据排序

sortable：true：单页可排序

排序：

remoteSort：false

columns里行内：sorter：function（a，b）{return 、、；}

 

6.信息提示

 

onLoadSuccess:function(data){
    $(this).datagrid('doCellTip'.{

1. cls:{'background-color':'red'}

'max-width':'300px','delay':'500'});}