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);

  • 相关阅读:
    Kotlin 学习笔记(一)
    Android 中调用本地命令
    Android 6.0 中的 Wifi 连接
    Android 中的广播机制
    面向对象之继承和多态
    2016 年秋季助教总结
    2016 年年志
    C 语言学习 第12次作业总结
    程序员编程艺术第三十六~三十七章、搜索智能提示suggestion,附近点搜索
    程序员编程艺术第三十四~三十五章:格子取数问题,完美洗牌算法
  • 原文地址:https://www.cnblogs.com/qinsilandiao/p/5016082.html
Copyright © 2011-2022 走看看