最近在研究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. 24小时学通Linux内核之如何处理输入输出操作

    真的是悲喜交加呀,本来这个寒假早上8点都去练车,两个小时之后再来实验室陪伴Linux内核,但是今天教练说没名额考试了,好纠结,不过想想就可以睡懒觉了,哈哈,自从大三寒假以来还没睡过懒觉呢,现在也有更多 ...

  2. Ubuntu下用SecureCRT连接串口/dev/ttyUSB0权限修复

    在普通用户的模式下,用SecureCRT链接串口交换机,开始会提示/dev/ttyUSB0权限不足,无法打开,临时的解决办法是 chmod 0+rw /dev/ttyUSB0 但是这个重启后便没了作用 ...

  3. poj 2585 拓扑排序

    这题主要在于建图.对9个2*2的小块,第i块如果出现了不等于i的数字,那么一定是在i之后被brought的.可以从i到该数字建一条边. 图建好后,进行一次拓扑排序,判段是否存在环.若存在环,那么就是B ...

  4. HTTP - 条件请求

    当 HTTP 请求包含 If-XXX 这种样式的首部时,服务器会对附带的条件进行判断,只有判断指定条件为真,才会执行请求.这样的请求首部有五个,分别是 If-Modified-Since.If-Unm ...

  5. Git - Download for Linux and Unix

    It is easiest to install Git on Linux using the preferred package manager of your Linux distribution ...

  6. spring+mybatis管理多个数据源（非分布式事务）

    本文通过一个demo,介绍如何使用spring+mybatis管理多个数据源,注意,本文的事务管理并非之前博文介绍的分布式事务. 这个demo将使用两个事务管理器分别管理两个数据源.对于每一个独立的事 ...

  7. Android之文字点击链接

    定义textView1和textView2并获得组件. String html = "<font color='red'></font>"; html += ...

  8. oracle储存过程，job,视图，触发器（记性不好，写个例子自己记）

    存储过程 create or replace procedure TestPro(Descerr out varchar2 ) is begin select * from test; excepti ...

  9. iMAC——查看开机关机时间

    每次下班都记不好早上几点打的卡,你是不是也经常有这样的情况:  那就用以下的代码考到Mac电脑的终端中,回车: mac终端输入上面命令行 查看开机时间: last | grep reboot 查看关机 ...

  10. template_11实参演绎

    1,演绎过程匹配类型A(来自实参的类型),参数化类型P(行参参数声明)如果被声明的参数是一个引用声明g(T& )那么P就是所引用类型T:f(T)中P就是所声明的参数类: decay指从数组和函 ...