jquery easyui无法绑定下拉框内容
最近在研究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无法绑定下拉框内容的更多相关文章
- jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)
效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- jquery+html三级联动下拉框
jquery+html三级联动下拉框及详情页面加载时的select初始化问题 html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...
- js改变下拉框内容
js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法
easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- WPF AutoGeneratingColumn 绑定下拉框
WPF自动产生列,前台代码: <DataGrid x:Name="Dg" AutoGenerateColumns="True" CanUserAddRow ...
- HTML中的select下拉框内容显示不全的解决办法
HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
随机推荐
- [改善Java代码]让工具类不可实例化
建议42: 让工具类不可实例化 Java项目中使用的工具类非常多,比如JDK自己的工具类java.lang.Math.java.util.Collections等都是我们经常用到的.工具类的方法和属性 ...
- [设计模式]<<设计模式之禅>>之关于单一职责原则
单一职责原则的英文名称是Single Responsibility Principle,简称是SRP. 这个原则存在争议之处在哪里呢?就是对职责的定义,什么是类的职责,以及怎么划分类的职责.我们先举个 ...
- 【概率dp,难度3颗星】hdu-5001(2014鞍山网络赛)
给你一个连通的无向图,等概率随机选取一个起点,走d步,每一步等概率走到相邻的点.问走完d步之后,每个点没有被经过的概率. 推状态的关键当然就是对这个“从任意起点走完d步点node没被经过的概率”的理解 ...
- 【转】【CDC翻客】移动端App测试实用指南
译者注:本文从测试人员的角度出发,提出了100多个在测试移动App过程中需要考虑的问题.不管你是测试人员.开发.产品经理或是交互设计师,在进行移动App开发时,这些问题都很有参考价值.我和Queen ...
- C#算法基础之插入排序
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- SQL_从星期一到星期六自动打卡SQL代码
create proc sp_MarkAutoKQ as begin ) ---创建两个变量,接收当前时间和当天是星期几 set @dateA=getdate() ---获取当前时间 set @dat ...
- CSS之图片关闭
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Win8、Win10进入SQL server配置管理器
使用 WIN8.WIN10 访问 SQL Server 配置管理器 因为 SQL Server 配置管理器是 Microsoft 管理控制台程序的一个管理单元而不是单独的程序,所以,当运行 Windo ...
- sql server日期时间转字符串(转)
一.sql server日期时间函数Sql Server中的日期与时间函数 1. 当前系统日期.时间 select getdate() 2. dateadd 在向指定日期加上一段时间的基 ...
- Cocos2d-x实例:设置背景音乐与音效-设置场景实现
设置场景(Setting),Setting.h文件代码如下: #ifndef __Setting_SCENE_H__ #define __Setting_SCENE_H__ #include &quo ...