最近在研究jquery easyui的DataGrid，发现DataGrid中的下拉框无法绑定值，找了很久也没发现是具体问题所在，最后还是同事帮忙搞定的。具体问题竟然是jquery easyui提供的demo中的jquery版本有问题，还有就是绑定的json数据源要添加Method: "get"属性，要不然在C#中会有问题。

具体代码如下：

<link rel="stylesheet" type="text/css"
href="themes/default/easyui.css" />
   
<link rel="stylesheet" type="text/css"
href="themes/icon.css" />
   
<link rel="stylesheet" type="text/css"
href="css/demo.css" />
   
<script type="text/javascript"
src="jquery/jquery-1.8.0.min.js"></script>

<script type="text/javascript"
src="jquery/jquery.easyui.min.js"></script>

<body>
   
<h2>
       
Haven't finished tasks</h2>
   
<div class="demo-info">
       
<div class="demo-tip icon-tip">
       
</div>
       
<div>
           
Click a cell to start
editing.</div>
   
</div>
   
<div style="margin: 10px 0;">
   
</div>
   
<table id="dg" class="easyui-datagrid"
title="Haven't finished tasks" style="width: 1000px;
       
height: auto" data-options="
   
   
   
    iconCls:
'icon-edit',
   
   
   
   
singleSelect: true,
   
   
   
    url:
'datagrid_data1.json',
   
   
   
    method:'get',
   
   
   
    toolbar:
'#tb',
   
   
   
    onClickRow:
onClickRow
   
   
   
">
       
<thead>
           
<tr>
               
<th
data-options="field:'taskid',width:60">
                   
Task ID
               
</th>
               
<th
data-options="field:'taskcontent',width:500,editor:'text'">

Task Content
               
</th>
               
<th data-options="field:'projectid',width:150,
                       
formatter:function(value,row){
                           
return row.projectname;
                       
},
                       
editor:{
                           
type:'combobox',
                           
options:{
                               
valueField:'projectid',
                               
textField:'projectname',
                               
url:'projects.json',
   
   
   
   
               
method:'get',
                               
required:true
                           
}
                       
}">
                   
Task Project
               
</th>
               
<th
data-options="field:'starttime',width:120,align:'center'">

Start Time
               
</th>
               
<th
data-options="field:'status',width:80,align:'center',editor:{type:'checkbox',options:{on:'',off:'P'}}">

Start Task
               
</th>
               
<th
data-options="field:'status',width:80,align:'center',editor:{type:'checkbox',options:{on:'',off:'P'}}">

Submit Task
               
</th>
           
</tr>
       
</thead>
   
</table>
   
<div id="tb" style="height:
auto">
       
<a href="javascript:void(0)"
class="easyui-linkbutton"
data-options="iconCls:'icon-add',plain:true"
           
onclick="append()">Append</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
               
data-options="iconCls:'icon-remove',plain:true"
onclick="removeit()">Remove</a>

</div>
   
<script
type="text/javascript">       
var editIndex = undefined;
       
function endEditing() {
           
if (editIndex == undefined) { return true }
           
if ($('#dg').datagrid('validateRow', editIndex)) {
               
var ed = $('#dg').datagrid('getEditor', { index: editIndex, field:
'projectid' });
               
var productname = $(ed.target).combobox('getText');
               
$('#dg').datagrid('getRows')[editIndex]['projectname'] =
productname;
               
$('#dg').datagrid('endEdit', editIndex);
               
editIndex = undefined;
               
return true;
           
} else {
               
return false;
           
}
       
}
       
function onClickRow(index) {
           
if (editIndex != index) {
               
if (endEditing()) {
                   
$('#dg').datagrid('selectRow', index)
   
   
   
   
   
   
   
.datagrid('beginEdit', index);
                   
editIndex = index;
               
} else {
                   
$('#dg').datagrid('selectRow', editIndex);
               
}
           
}
       
}
       
function append() {
           
if (endEditing()) {
               
$('#dg').datagrid('appendRow', { status: 'P' });
               
editIndex = $('#dg').datagrid('getRows').length - 1;
               
$('#dg').datagrid('selectRow', editIndex)
   
   
   
   
   
   
.datagrid('beginEdit', editIndex);
           
}
       
}
       
function removeit() {
           
if (editIndex == undefined) { return }
           
$('#dg').datagrid('cancelEdit', editIndex)
   
   
   
   
   
.datagrid('deleteRow', editIndex);
           
editIndex = undefined;
       
}
   
</script>
</body>

jquery easyui无法绑定下拉框内容的更多相关文章

  1. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  2. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  3. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  4. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  5. easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法

    easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...

  6. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  7. WPF AutoGeneratingColumn 绑定下拉框

    WPF自动产生列,前台代码: <DataGrid x:Name="Dg" AutoGenerateColumns="True" CanUserAddRow ...

  8. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  9. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

随机推荐

  1. [改善Java代码]性能考虑，数组是首选

    建议60:性能考虑,数组是首选 一.分析  数组在实际的系统开发中使用的越来越少,我们通常只有在阅读一些开源项目时才会看到它们的身影,在Java中它确实没有List.Set.Map这些集合使用起来方便 ...

  2. Linux 命令 - chown: 更改文件的所有者和所属群组

    chown 命令用来更改文件或者目录的所有者和所属群组.使用这个命令需要超级用户的权限. 命令格式 chown [OPTION]... [OWNER][:[GROUP]] FILE... chown ...

  3. linux下vsftpd的安装与配置说明

    问题: 1.530 Permission denied.答:配置文件中userlist_enable=YES(如果启用即YES,则看userlist_deny=YES/NO,如果为NO,则要把登录的用 ...

  4. linux学习书籍推荐linux学习书籍推荐

    引用地址:http://www.cnblogs.com/notepi/archive/2013/06/15/3137103.html Linux 学习书目推荐 Linux基础 1.<Linux与 ...

  5. 注意java的对象引用

    要注意,当前拿到的“对象引用”, 是不是 指向 最新的实例, 没有的话, 要重新 生成实例去指向. 代码例子: AnsweringRuleInfo bhRule = accountGenerator. ...

  6. 控制GridView中字段的长度，规范数据

    前台:   <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridVi ...

  7. 转：Android 2.3 代码混淆proguard技术介绍

    ProGuard简介 ProGuard是一个SourceForge上非常知名的开源项目.官网网址是:http://proguard.sourceforge.net/. Java的字节码一般是非常容易反 ...

  8. Java 读写XML文件 API--org.dom4j

    om4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个十分优秀的JavaXML API,具有性能优异.功能强大和极其易使用的特点,同时它也是一个开放源代码的软件 ...

  9. Java 对于继承的初级理解

    概念:继承,是指一个类的定义可以基于另外一个已存在的类,即子类继承父类,从而实现父类的代码的重用.两个类的关系:父类一般具有各个子类共性的特征,而子类可以增加一些更具个性的方法.类的继承具有传递性,即 ...

  10. LINQ中实现 In 与 Not In

    T-SQL的IN: Select ProductID, ProductName, CategoryID From dbo.Products , ) T-SQL的NOT IN: Select Produ ...