最近在研究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代码]集合运算时使用更优雅的方式

    在初中代数中,我们经常会求两个集合的并集.交集.差集等,在Java中也存在着此 类运算,那如何实现呢? 一提到此类集合操作,大部分的实现者都会说:对两个集合进行遍历,即可求出结果.是的,遍历可以实现并 ...

  2. RestEasy传值方式

    一.@pathparam    @PathParam 是一个参数注解,可以将一个 URL 上的参数映射到方法的参数上,它可以映射到方法参数的类型有基本类型.字符串.或者任何有一个字符串作为构造方法参数 ...

  3. poj 3692 二分图最大匹配

    思路: 如果我们将认识的建边,求最大独立集就是互相不认识的人数.那么我们反过来,将不认识的建图,求最大独立集就是互相认识的人数. #include<cstdio> #include< ...

  4. 1、关于Boolean（2015年05月30日）

    背景:刚在看Effective Java,看到一段关于Boolean提供一个返回实例的静态方法的例子,便去看了下Boolean的源码,发现有些内容是之前没注意到的,于是便有了下面这些. 1. Bool ...

  5. beeline连接hive server遭遇MapRedTask (state=08S01,code=1)错误

    采用beeline连接hive server是遭遇到如下错误: 5: jdbc:hive2://bluejoe0/default> select * from hive_triples wher ...

  6. 【程序员的SQL金典】笔记(第1章~第5章)

      第一章数据库入门 1.概念: 数据库 表 列 记录(行) 主键 索引         第二章 数据表的创建和管理 1.数据库系统中的数据类型大致可以分为五类:整数.数值.字符相关.日期时间以及二进 ...

  7. usp_Copy_Unzip_DirFiles -- 拷贝，解压，列出文件名 from FTP Folder to Work Folder

    CREATE PROC usp_Copy_Unzip_DirFiles @FTPPath NVARCHAR(4000)= '', -- ftp 文件夹路径 @WorkPath NVARCHAR(400 ...

  8. JS调用iframe方式实现Web区域打印页面内容

    1.程序说明 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印: 2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容. 2.代码部分 1) ...

  9. TFS2012常见问题及解答

    1.删除workItem工作项(包括Bug,用户场景,任务等) 需要利用到witadmin工具,目录在cd %programfiles%\Microsoft Visual Studio 11.0\Co ...

  10. Cocos2d-x加速度计

    加速度计是一种能够感应设备一个方向上线性加速度的传感器.广泛用于航空.航海.宇航及武器的制导与控制中.线加速度计的种类很多,在iOS等移动设备中目前采用的是三轴加速度计,可以感应设备上X.Y.Z轴方向 ...