最近在研究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代码]避免对象的浅拷贝

    建议43: 避免对象的浅拷贝 我们知道一个类实现了Cloneable接口就表示它具备了被拷贝的能力,如果再覆写clone()方法就会完全具备拷贝能力.拷贝是在内存中进行的,所以在性能方面比直接通过ne ...

  2. 【三分搜索算法】UVa 10385 - Duathlon

    题目链接 题意:“铁人三项”比赛中,需要选手在t km的路程里进行马拉松和骑自行车项目.现有n名选手,每位选手具有不同的跑步速度和骑车速度.其中第n位选手贿赂了裁判员,裁判员保证第n名选手一定会取得冠 ...

  3. 【数论】UVa 10586 - Polynomial Remains

    Problem F: Polynomial Remains Given the polynomial a(x) = an xn + ... + a1 x + a0, compute the remai ...

  4. StringBuilder 类

    表示可变字符字符串.无法继承此类. 此类表示值为可变字符序列的类似字符串的对象.之所以说值是可变的,是因为在通过追加.移除.替换或插入字符而创建它后可以对它进行修改.有关比较,请参见 String 类 ...

  5. css水平居中总结

    前言 看了好多篇帖子,发现没有一个能够直接让新手很快上手使用水平居中布局的,所以在此进行一番总结,也算是我对水平居中布局的一点点积累沉淀,同时也方便初学者们拿来即用. 一.元素分类 1.行内元素 行内 ...

  6. js 后台弹窗

    后台弹出操作成功,失败信息 /// <summary> /// 弹出信息,并跳转指定页面. /// </summary> public static void AlertAnd ...

  7. css3学习笔记之2D转换

    translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  8. Poj OpenJudge 百练 1573 Robot Motion

    1.Link: http://poj.org/problem?id=1573 http://bailian.openjudge.cn/practice/1573/ 2.Content: Robot M ...

  9. Mysql创建函数时报错

    先去查询  show variables like '%func%' ; 这个语句,如果该语句最后输出的值是OFF 那么就用下面的语句去修改就可以:set global log_bin_trust_f ...

  10. 在Windows下设置环境变量 运行mysql程序变得更容易

    在Windows下设置环境变量,点开始菜单,右键单击我的电脑--属性--高级--环境变量 可以看到PATH的变量是这样的: C:\WINDOWS;C:\WINDOWS\COMMAND   为了让运行m ...