不羁的空间
Appearance

combo下拉框系列

bujichongpc框架pc框架 表单

说明

combo是 easyUI 很重要的下拉控件，功能完整，简单强大。

增加 clearIcon 属性

  • 下拉框默认输入值是遵循列表值的，但很多输入框下拉选项中是没有空选项的，当需要置空输入框时，只能通过添加此属性实现。
  • 为了方便用户清空输入框，也可以添加此属性。
  • 此属性适用于 combo 系列输入框。

用法：

$('#cc').combobox({
    url:'combobox_data.json',//请求地址
    clearIcon: true, //用户可清空输入框小图标
    valueField:'id',//value值
    textField:'text',//text值
    ...
});

用户自由输入非列表值处理

  • 普通情况，输入框的值都是需要遵循列表的，即值必须从下拉里选择，这是非常合理的，但有时，下拉框也允许用户自由输入框， 这时，我们就要放开2个选项 limitToList 和 reversed。
  • 此设置适用于 combo 系列输入框。
$('#cc').combobox({
    //下面2个选项设为 false后，下拉框可以自由输入
    limitToList : false,
    reversed : false,
    ...
});

remote 远程请求模式 最少字段属性 minRemoteKeyLen

  • 当下拉请求框为 remote 模式时，最少输入 2 个字符才产生请求，这是我们添加了 minRemoteKeyLen 属性控制的，默认值为 2，入股需要修改，请设置此值。
  • 此设置适用于 combo 系列输入框。
$('#cc').combobox({
    remote: true,
    //输入4个字符才开始远程请求
    minRemoteKeyLen: 4
    ...
});

onBeforeChange 方法

  • 增加 onBeforeChange 勾子方法,在切换值的时候，此函数 return true 才可以继续，用于拦截某些选择不符合条件则不切换值的处理。
  • 此设置适用于 combo 系列输入框。
$('#cc').combobox({
    onBeforeChange: function(val,oldVal){

    }
    ...
});

值为空时，onSelect 的返回

  • combo 中的setValues方法增加 处理 combobox和 combogrid 的 onSelect方法，当清空输入框时 onSelect 返回 index:-1,record:{}。
  • 此返回 是为了修正 onSelect勾子不响应清空或为空的情况。

combobox示例代码

更多实例请 参考这里open in new window

html方式初始化:

<label class="col-xs-2 control-label">关联网站：</label>
<div class="col-xs-4 control-cont">  <!-- input添加class easyui-combobox来初始化combobox -->
   <input 
   class="form-control easyui-combobox required" style="width:100%;" 
   id="userSites" type="text" name="userSites" value="" placeholder="请选择关联组织" 
   data-options="valueField: 'id',textField: 'text',url: 'json/combo.js',multiple:true"
   />
</div>

js方式初始化:

$('#cc').combobox({
    url:'combobox_data.json',//请求地址
    valueField:'id',//value值
    textField:'text',//text值
    multiple:true//是否多选
    onSelect: function(rec){//select事件
        var url = 'get_data2.php?id='+rec.id;
        $('#cc2').combobox('reload', url);
    }"
});

数据参考：

[{
    "id":1,
    "text":"text1"
},{
    "id":2,
    "text":"text2"
},{
    "id":3,
    "text":"text3",
    "selected":true//是否选中
},{
    "id":4,
    "text":"text4"
},{
    "id":5,
    "text":"text5"
}]

combogrid 示例代码

更多实例请 参考这里open in new window

html方式初始化:

<select class="form-control easyui-combogrid" style="width:250px" data-options="
  panelWidth: 380,
  idField: 'userName',
  textField: 'realName',
  url: 'json/popgrid.js',
  method: 'get',
  columns: [[
    {field:'userName',title:'用户名',width:80},
    {field:'realName',title:'姓名',width:120},
    {field:'mobile',title:'手机',width:180}
  ]],
  fitColumns: true
">

js方式初始化:

$('#cc').combogrid({
    delay: 500,//用户输入请求间隙时间
    mode: 'remote',//根据输入向远端请求
    url: 'get_data.php',//请求url
    idField: 'id',//输入框返回value
    textField: 'name',//输入框返回字符
    columns: [[//grid设置
        {field:'userName',title:'用户名',width:80},
        {field:'realName',title:'姓名',width:120},
        {field:'mobile',title:'手机',width:180}
    ]]
});

js方式赋值：

$('#cc').combogrid('setValue', 6);//setValue

$('#cc').combogrid('setValues', [1,3,21,{id:73,text:'text73'}]);//setValues

$('#cc').combogrid('clear');//清除赋值

//通用方法
$('#cc').setVal(6);
$('#cc').easyVal(6);

数据参考：

{
    total:54,
    rows:[{
        userName:"lihua",
        realName:"李华",
        sex:"1",
        mobile:"13315113521",
        qq:"2357028767"
        } ]
    }, {
        userName:"raohui",
        realName:"饶慧",
        sex:"2",
        mobile:"13975896807",
        qq:null
        }]
    }]
};

combotree 示例代码

更多实例请 参考这里open in new window

html方式初始化:

<label class="col-xs-2 control-label">关联组织：</label>
<div class="col-xs-4 control-cont"><!-- input添加class easyui-combotree来初始化combobox -->
  <input class="form-control easyui-combotree required" style="width:100%;" 
    data-options="url:'json/groupTree.js',method:'get',flatData:true,multiple:true,onlyLeafCheck:true" 
    type="text" 
    name="group" 
    value="" maxlength="20" 
    placeholder="请选择关联组织"
  />
</div>

js方式初始化:

$('#cc').combotree({
    url: 'get_data.php',//请求地址
    flatData:true,//采用扁平数据结构
    onlyLeafCheck :true, //是否只子节点可点击
    multiple:true//是否多选
});

js方式赋值：

$('#cc').combotree('setValue', 6);//setValue

$('#cc').combotree('setValue', {//setValue
  id: 61,
  text: 'text61'
});

$('#cc').combotree('setValues', [1,3,21]);//setValues

$('#cc').combotree('setValues', [1,3,21,{id:73,text:'text73'}]);//setValues

$('#cc').combotree('clear');//清除赋值

数据参考：

[ {
    pid:null,
    id:1,
    name:"根组织"
}, {
    pid:1,
    id:11,
    name:"爱尔总部"
}, {
    pid:11,
    id:111,
    name:"长沙爱尔"
}, {
    pid:111,
    id:1111,
    name:"长沙爱尔财务",
    checked:true//是否被选中
}, {
    pid:11,
    id:115,
    name:"广州爱尔"
    pid:11,
    id:1110,
    name:"vv3"
} ];
文档目录