JQueryEasyUI框架下的combobox的取值和绑定——善良公社

       最近做的项目涉及到JQueryEasyUI框架的使用,EasyUI是什么?网上解释说它是来自W3C标准WEB前端专家DHTML精英俱乐部的简单易用功能强大的轻量级WEB前端JavaScript框架!从这句话的理解来说,我认为它是一种JavaScript框架。

      对于最近的使用中,给我的感觉就是,借用官网JqueryEasyUI上的一句话,EasyUI是基于JQuery用户界面插件的集合,我把它理解成一种插件,不知道有没有问题。而使用easyui,不需要写很多的javascript代码,只需在定义的用户界面写一些HTML标记,完成HTML5网页的框架,所以说在这个框架里面是没有服务器控件。没有ruant=“server”。其功能强大,使用方便。

       下面就说说EasyUI框架下的combobox,在使用的时候获取值和绑定值得方法。

      在前台,我们通常这么写:

<select class="easyui-combobox" id ="cmbName"  name="name" style="width: 150px;" ></select>
      在牛腩新闻发布系统中和北大青鸟中都讲到了控件中数据绑定的问题,那在这里能不能也采用那种方法?牛腩新闻发布系统和北大青鸟中讲的控件都是服务器控件,但这里不是服务器控件,我们又该怎么绑定值和获取值?

绑定值:(方法不止这一个)

     可以将这个控件转为服务器控件。加入runat=“server”,将其装为服务器控件。剩下就同牛腩新闻发布系统和北大青鸟里面讲的服务器控件一样,绑定值。

<select class="easyui-combobox" id ="cmbName"  runat="server" datatextfield ="AdminName" datavaluefield ="AdminID" name="name" style="width: 150px;" ></select>
    后台:
   protected void Page_Load(object sender, EventArgs e)
        {
                noticeInfoBLL Bnotice = new noticeInfoBLL();
                DataSet ds = new DataSet();
                ds = Bnotice.GetAllList();
                DataTable dt = ds.Tables[0];
                cmbName.DataSource =dt;
                cmbName.DataTextField = "AdminName";
                cmbName.DataValueField = "AdminID";
                cmbName.DataBind();
        }
         绑定值之后,怎么获取里面的值呢?

获取值:

    var adminname=$("#state").combobox("getText"); //这是获取combobox中选择的内容,例如上面绑定的“AdminName”
    var adminid=$("#state").combobox("getValue");  //这是获取combobox选择的值,例如上面绑定的“AdminID”

comboboxc绑定值出现重复:

       在combobox绑定值的时候,我还遇到这么一个问题,在返回的数据中,有很多条,因为我是往combobox中绑定的名字,名字不能重复,但是我从数据库中返回的数据却是这样的:
               
那么怎么解决这个问题呢?
有两个解决方法:
第一:修改查询语句,使用SQL SELECT DISTINCT 语句
第二:
      在后台绑定数据时也可以像这样绑定:
 protected void Page_Load(object sender, EventArgs e)
        {
            //if (!Page.IsPostBack)
            //if (Session["userid"] != null && Session["postid"] != null)
            
                noticeInfoBLL Bnotice = new noticeInfoBLL();
                DataSet ds = new DataSet();
                ds = Bnotice.GetAllList();
                DataTable dt = ds.Tables[0];
              //去重复的AdminName和AdminID
                DataView dv=dt.DefaultView ;
                cmbName.DataSource = dv.ToTable(true, "AdminName","AdminId");
                cmbName.DataTextField = "AdminName";
                cmbName.DataValueField = "AdminID";
                cmbName.DataBind();
        }



          




            

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 29
    评论
好的,针对您的问题,我来给您讲一讲如何实现 EasyUI Combobox 的 AJAX 分页和默认值扩展。 首先,我们需要在服务器端提供一个接口,用于返回分页数据。这个接口需要接受两个参数,一个是当前页数,另一个是每页显示的记录数。然后根据这两个参数进行数据查询,最后将查询结果返回给客户端。 接下来,我们需要在客户端的 Combobox 中配置 AJAX 分页参数。具体来说,我们需要设置以下几个属性: - url:指定服务器端接口的地址。 - method:指定 AJAX 请求的 HTTP 方法,可以是 GET 或 POST。 - queryParams:指定请求参数,包括当前页数和每页显示的记录数。 - loadFilter:指定请求成功后如何处理返回的数据,这里需要将数据格式转换成 Combobox 能够接受的格式。 下面是一个示例代码: ```javascript $('#combobox').combobox({ url: 'http://example.com/data', method: 'get', queryParams: { page: 1, rows: 10 }, loadFilter: function(data){ var result = []; for(var i=0; i<data.rows.length; i++){ result.push({ value: data.rows[i].id, text: data.rows[i].name }); } return result; } }); ``` 其中,`data` 是从服务器端返回的数据,包括 `total`(总记录数)和 `rows`(当前页的记录列表)。在 `loadFilter` 函数中,我们将 `rows` 转换成 Combobox 能够接受的格式,即 `{value: id, text: name}`。 接下来,我们需要实现默认值扩展。具体来说,我们需要在 Combobox 中添加一个“全部”或“请选择”选项,并将其作为默认选项。当用户选择这个选项时,我们需要清空 Combobox 中的其他选项。 以下是一个示例代码: ```javascript $('#combobox').combobox({ valueField: 'id', textField: 'name', data: [{ id: '', name: '全部' }, { id: 1, name: '选项1' }, { id: 2, name: '选项2' }], onSelect: function(record){ if(record.id === ''){ $(this).combobox('clear'); } } }); ``` 其中,我们在数据中添加了一个空值选项(id 为空),并将其名称设为“全部”。在 `onSelect` 事件中,当用户选择了空值选项时,我们调用 `clear` 方法清空 Combobox 中的其他选项。 以上就是 EasyUI Combobox 的 AJAX 分页和默认值扩展的实现方法。希望对您有所帮助。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值