最近在研究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. hdu 1423 最长公共递增子序列

    这题一开始把我给坑了,我还没知道LCIS的算法,然后就慢慢搞吧,幸运的是还真写出来了,只不过麻烦了一点. 我是将该题转换为多条线段相交,然后找出最多多少条不相交,并且其数值死递增的. 代码如下: #i ...

  2. Learn Python The Hard Way学习笔记001

    今天搜索了一下raw_input() 和 input()的区别,引用下原文部分内容 两个函数均能接收 字符串 ,但 raw_input() 直接读取控制台的输入(任何类型的输入它都可以接收).而对于 ...

  3. MAC系统介绍

    MACOS: UNIX系统图形界面的显示 开发环境: 一种是终端(terminal) 一种是Xcode(ide) MAC快捷键: command(window) + c : 复制 command + ...

  4. C++对象的JSON序列化与反序列化探索完结-列表的序列化与反序列化

    在前两篇文章中,我们已经完成对普通对象以及复杂对象嵌套的序列化与反序列化,见如下地址: C++对象的JSON序列化与反序列化探索 C++对象的JSON序列化与反序列化探索续-复杂对象的序列化与反序列化 ...

  5. JAVA_SE复习（Class）

    一.面向对象程序设计(OOP) 1.面向对象的程序设计是程序开发的一种方法.它将对象作为程序的基本单元,将程序和 数据封装其中,以提高软件的重用性.灵活性和扩展性 2.三个特征: 封装:隐藏信息 继承 ...

  6. 关于fputs和fgets的几个细节

    C语言中两个标准IO fputs和fgets都是针对行来进行数据的读取的!这里关于这两个IO函数我有几个小细节想在这里和大家分享一下,希望能够对大家产生帮助! 首先贴上这两个函数的函数声明,下面以这两 ...

  7. Qt移植 Window --Linux

    1.把源代码复制到Linux目录,使用qmake命令,注意在shell中直接使用qmake命令注意设置PATH环境变量 2. 在目录中会生成Makeflie文件 3. make即可 /usr/bin/ ...

  8. [WinForm]为TextBox设置水印文字

    关键代码: using System; using System.Runtime.InteropServices; using System.Windows.Forms; namespace WinF ...

  9. Qt 日志宏

    随便写了一个日志帮助的宏,既可以如同qDebug()一般在调试时输出信息,也可以在输出文本文件 #ifndef LOG_H #define LOG_H #include <QDir> #i ...

  10. nginx 重启命令

    #重启nginx sudo /etc/init.d/nginx restart sudo /etc/init.d/nginx Usage: /etc/init.d/nginx {start|stop| ...