zoukankan      html  css  js  c++  java
  • ComboBox( 下拉列表框)

    一. 加载方式
    //class 加载方式
    <select id="box" class="easyui-combobox" name="box"
    style="200px;">
    <option value="aaaa">aaaa</option>
    <option value="bbbb">bbbb</option>
    <option value="cccc">cccc</option>
    <option value="dddd">dddd</option>
    <option value="eeee">eeee</option>
    </select>
    //JS 加载方式
    <input id="box" name="user">
    $('#box').combobox({
    valueField : 'id',
    textField : 'user',
    url : 'content.json',
    });

    二.属性列表

    //部分属性
    $('#box').combobox({
    valueField : 'id',
    textField : 'user',
    //url : 'content.json',
    url : 'user.php',
    groupField : 'gender',
    groupFormatter: function(group){
    return '<span style="color:red">' + group + '</span>';
    },
    mode : 'remote',
    });

    //部分属性
    $('#box').combobox({
    valueField : 'label',
    textField : 'value',
    data : [{
    label : 'java',
    value : 'java',
    }, {
    label : 'C#',
    value : 'C#',
    }]
    });
    //部分属性
    $('#box').combobox({
    valueField : 'id',
    textField : 'user',
    //url : 'content.json',
    url : 'user.php',
    filter: function(q, row){
    var opts = $(this).combobox('options');
    return row[opts.textField].indexOf(q) >= 0;
    },
    formatter: function(row){
    var opts = $(this).combobox('options');
    return '[' + row[opts.textField] + ']';
    },
    });

    三.事件列表

    //部分事件
    $('#box').combobox({

    onSelect : function () {
    //alert('选定项时触发!');
    },
    onUnselect : function () {
    alert('选定后触发!');
    },
    });

    三.方法列表

    //部分方法
    console.log($('#box').combobox('getData'));
    $('#box').combobox('loadData', [
    {
    "id" : 1,
    "user" : "蜡笔小新",
    "email" : "xiaoxin@163.com",
    "group" : "男",
    "date" : "2014-10-1"
    },
    {
    "id" : 2,
    "user" : "樱桃小丸子",
    "email" : "xiaowanzi@163.com",
    "group" : "女",
    "date" : "2014-10-2"
    },
    {

    "id" : 3,
    "user" : "黑崎一护",
    "email" : "yihu@163.com",
    "group" : "男",
    "date" : "2014-10-3"
    }
    ]);
    $('#box').combobox('reload');
    $('#box').combobox('reload', 'content.json');
    $('#box').combobox('setValue', '001');
    $('#box').combobox('unselect', 1);

  • 相关阅读:
    jQuery.getJSON() – jQuery API
    打造个性化的Select(可编辑)(还不错,有一定实用价值)
    RMAN备份异机恢复并创建新DBID
    输出所有在给定范围内的水仙花数
    使用 ptstalk 诊断 MySQL 问题
    VC6.0 error LNK2001: unresolved external symbol _main解决办法
    Mysql备份
    在从1到n的正数中1出现的次数
    游标sql语句
    linux中如何改IP
  • 原文地址:https://www.cnblogs.com/qinsilandiao/p/5016082.html
Copyright © 2011-2022 走看看