Easyui combobox 怎么加载数据

说明:开发环境 vs2012 asp.net mvc4 c#

1、效果图

 

2、HTML代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EasyuiCombotree.aspx.cs" Inherits="MvcAppTest.EasyuiCombotree" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui Combotree 测试</title>
    <link href="Easyui/themes/default/easyui.css" rel="stylesheet" />
    <script src="Easyui/jquery-1.7.2.js"></script>
    <script src="Easyui/jquery.easyui.min.js"></script>
    <script src="Easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#cc').combobox({
                url: 'Home/getOffice',
                valueField: 'id',
                textField: 'text',
                required: true,
                queryParams: { OFFID: 100 },
                editable: false,//不可编辑,只能选择
                disabled: false,
                value: '选择部门'
            });
        });
        function getValue()
        {
            var value = $('#cc').combobox('getValue');
            alert(value);
        }
        function getText()
        {
            var text = $('#cc').combobox('getText');
            alert(text);
        }
    </script>
</head>
<body>
  <input id="cc" name="dept" value=""    />       
  <div><input type="button" value="获取Value的值" style="width:100px;" onclick="getValue()"/>&nbsp;&nbsp;&nbsp;<input type="button" value="获取text的值" onclick="getText()" style="width:100px;" /></div>  
<div style="height:30px;"></div>
<span>combobox 另一种定义形式</span>
<div>
<select id="Select1" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>
</div>
</body>
</html>


3、Home后台代码

        public JsonResult getOffice(string OFFID)
        {
             Int32 officeID = Convert.ToInt32(OFFID);
            List<ComboModel> myList = new List<ComboModel>();          
        
                for (int i = 1; i < 20; i++)
                {
                    ComboModel model = new ComboModel()
                    {
                      id=i,
                       text="部门"+i.ToString()
                    };
                    myList.Add(model);
                }

            
            return Json(myList, JsonRequestBehavior.DenyGet);
        }
   public class ComboModel
    {
        public System.Int32 id { get; set; }
        public System.String text { get; set; }
    }

 

转载于:https://www.cnblogs.com/net064/p/10275598.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui中,可以通过设置combobox的data属性来绑定数据源。data属性可以是一个JavaScript数组,包含要显示在combobox中的数据。 以下是一个简单的示例代码,示例中的combobox数据源是一个包含“北京”、“上海”、“广州”和“深圳”的数组: ```javascript $('#mycombobox').combobox({ data: [ {value: '北京', text: '北京'}, {value: '上海', text: '上海'}, {value: '广州', text: '广州'}, {value: '深圳', text: '深圳'} ] }); ``` 在这个示例代码中,mycomboboxcombobox的id,data属性是一个数组,包含了要显示在combobox中的数据。数组中的每个元素都是一个对象,包含了value和text属性。value属性表示该选项的值,text属性表示该选项在combobox中显示的文本。 如果需要从后台获取数据来绑定combobox,则可以使用easyui的远程数据绑定方法。在远程绑定中,需要指定combobox的url属性和valueField属性,url属性表示从后台获取数据的url,valueField属性表示数据源中每个选项的值字段。 以下是一个远程数据绑定的示例代码,示例中的combobox数据源是从远程url中获取的: ```javascript $('#mycombobox').combobox({ url: 'data.php', valueField: 'id', textField: 'text' }); ``` 在这个示例代码中,mycomboboxcombobox的id,url属性表示从后台获取数据的url,valueField属性表示数据源中每个选项的值字段,textField属性表示数据源中每个选项的文本字段。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值