Jquery easyui开启行编辑模式增删改操作
字体：[ ] 类型：转载 时间：
jquery easyui框架提供了创建网页所需要的一切，可以帮助大家建立站点，接下来，通过本文给大家介绍Jquery easyui开启行编辑模式增删改操作，感兴趣的朋友一起学习
jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。
easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
HTML 网页的完整框架。
easyui 节省了开发产品的时间和规模。
easyui 非常简单，但是功能非常强大。
先给大家展示效果图：
Html代码：
&table id="dd"&
引入JS文件和CSS样式
&script src="/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js" type="text/javascript"&&/script&
&script src="/Resources/jquery-easyui-1.2.3/jquery.easyui.min.js" type="text/javascript"&&/script&
&link href="/Resources/jquery-easyui-1.2.3/themes/default/easyui.css" rel="stylesheet"
type="text/css" /&
&link href="/Resources/jquery-easyui-1.2.3/themes/icon.css" rel="stylesheet"
type="text/css" /&
&script src="/Resources/jquery-easyui-1.2.3/locale/easyui-lang-zh_CN.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
//定义全局变量datagrid
var editRow = //定义全局变量：当前编辑的行
datagrid = $("#dd").datagrid({
url: ‘UserCenter.aspx‘, //请求的数据源
iconCls: ‘icon-save‘, //图标
pagination: true, //显示分页
pageSize: 15, //页大小
pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数
fit: true, //datagrid自适应宽度
fitColumn: false, //列自适应宽度
striped: true, //行背景交换
nowap: true, //列内容多时自动折至第二行
border: false,
idField: ‘ID‘, //主键
columns: [[//显示的列
{field: ‘ID‘, title: ‘编号‘, width: 100, sortable: true, checkbox: true },
{ field: ‘UserName‘, title: ‘用户名‘, width: 100, sortable: true,
editor: { type: ‘validatebox‘, options: { required: true} }
{ field: ‘RealName‘, title: ‘真实名称‘, width: 100,
editor: { type: ‘validatebox‘, options: { required: true} }
{ field: ‘Email‘, title: ‘邮箱‘, width: 100,
editor: { type: ‘validatebox‘, options: { required: true} }
queryParams: { action: ‘query‘ }, //查询参数
toolbar: [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler: function () {//添加列表的操作按钮添加，修改，删除等
//添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
//将新插入的那一行开户编辑状态
datagrid.datagrid("beginEdit", 0);
//给当前编辑的行赋值
editRow = 0;
{ text: ‘删除‘, iconCls: ‘icon-remove‘, handler: function () {
//删除时先获取选择行
var rows = datagrid.datagrid("getSelections");
//选择要删除的行
if (rows.length & 0) {
$.messager.confirm("提示", "你确定要删除吗?", function (r) {
var ids = [];
for (var i = 0; i & rows. i++) {
ids.push(rows[i].ID);
//将选择到的行存入数组并用,分隔转换成字符串，
//本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
alert(ids.join(‘,‘));
$.messager.alert("提示", "请选择要删除的行", "error");
{ text: ‘修改‘, iconCls: ‘icon-edit‘, handler: function () {
//修改时要获取选择到的行
var rows = datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行修改，否则不操作
if (rows.length == 1) {
//修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
//当无编辑行时
if (editRow == undefined) {
//获取到当前选择行的下标
var index = datagrid.datagrid("getRowIndex", rows[0]);
//开启编辑
datagrid.datagrid("beginEdit", index);
//把当前开启编辑的行赋值给全局变量editRow
//当开启了当前选择行的编辑状态之后，
//应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
datagrid.datagrid("unselectAll");
{ text: ‘保存‘, iconCls: ‘icon-save‘, handler: function () {
//保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
datagrid.datagrid("endEdit", editRow);
{ text: ‘取消编辑‘, iconCls: ‘icon-redo‘, handler: function () {
//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}, ‘-‘],
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit该方法触发此事件
(rowData);
onDblClickRow: function (rowIndex, rowData) {
//双击开启编辑行
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowI
以上实例代码给大家介绍了Jquery easyui开启行编辑模式增删改操作的相关知识，希望对大家学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery Easyui Datagrid实现批量操作（编辑，删除，添加）
作者：ymnets
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了jquery Easyui Datagrid实现批量操作（编辑，删除，添加），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
有时候我们的后台系统表单比较复杂，做过进销存或者一些销售订单的都应该有过感觉。
虽然Easyui Datagrid提供了行内编辑，但是不够灵活，但是我们稍微修改一下来达到批量编辑,批量删除,批量添加的效果。
现在我们来看看原的编辑:来自Easyui 1.5.1的Demo &demo/datagrid/rowediting.html&
接下来，我们主要是要高度自由的编辑实现：
1.可以同时追加多行
2.追加的行可以是任何位置
3.可以随时进行编辑任意位置的行
4.保存再统一验证
在原有的rowediting.html进行修改！
第一：修改行的点击事件（点击行的时候进入编辑状态）
function onClickCell(index, field){
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', { index: index, field: field });
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
editIndex =
setTimeout(function () {
$('#dg').datagrid('selectRow', editIndex);
第二：删除事件（点击顶部菜单Remove删除选中的行，点击列表的-号，删除减号行）
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('selectRow', editIndex);
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex =
第三：添加事件，点击菜单的Append和+号
function append(){
var index = $('#dg').datagrid('getRowIndex', $('#dg').datagrid('getSelected'));
if (index == -1)
index = 0;
$("#dg").datagrid("insertRow", {
index: index+1,
row: {oper: "&a href='javascript:append()'&+&a& &a href='javascript:removeit()'&-&a&",status:'P'}
第四：保存（获得操作的记录，包括，增加，修改，删除中的记录）
function accept(){
if (endEditing()){
var $dg = $('#dg');
var rows = $dg.datagrid('getChanges');
if (rows.length) {
var inserted = $dg.datagrid('getChanges', "inserted");
var deleted = $dg.datagrid('getChanges', "deleted");
var updated = $dg.datagrid('getChanges', "updated");
var effectRow = new Object();
if (inserted.length) {
effectRow["inserted"] = JSON.stringify(inserted);
if (deleted.length) {
effectRow["deleted"] = JSON.stringify(deleted);
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
//alert(inserted);
//alert(deleted);
//alert(updated);
//$.post("/Home/Commit", effectRow, function (rsp) {
// if (rsp) {
$dg.datagrid('acceptChanges');
bindData();
//}, "JSON").error(function () {
// $.messager.alert("提示", "提交错误了！");
最后我们可以获得，上面操作的，所有：添加的行，删除的行，更新的行！把数据传入到数据后台进行处理！
最后你还需要对数据进行循环校验,可以获得数据，在控制台输出：
console.log(inserted);
console.log(deleted);
console.log(updated);
最后完整代码：（替换Easyui的rowediting.html可运行效果）
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Row Editing in DataGrid - jQuery EasyUI Demo&/title&
&link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css" rel="external nofollow" &
&link rel="stylesheet" type="text/css" href="../../themes/icon.css" rel="external nofollow" &
&link rel="stylesheet" type="text/css" href="../demo.css" rel="external nofollow" &
&script type="text/javascript" src="../../jquery.min.js"&&/script&
&script type="text/javascript" src="../../jquery.easyui.min.js"&&/script&
&h2&Row Editing in DataGrid&/h2&
&p&Click the row to start editing.&/p&
&div style="margin:20px 0;"&&/div&
&table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:800height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: 'datagrid_data1.json',
method: 'get',
onClickCell: onClickCell,
onEndEdit: onEndEdit
&th data-options="field:'oper',width:80"&操作&/th&
&th data-options="field:'itemid',width:80"&Item ID&/th&
&th data-options="field:'productid',width:100,
formatter:function(value,row){
return row.
type:'combobox',
valueField:'productid',
textField:'productname',
method:'get',
url:'products.json',
}"&Product&/th&
&th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}"&List Price&/th&
&th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'"&Unit Cost&/th&
&th data-options="field:'attr1',width:250,editor:'textbox'"&Attribute&/th&
&th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}"&Status&/th&
&div id="tb" style="height:auto"&
&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()"&Append&/a&
&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()"&Remove&/a&
&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()"&Accept&/a&
&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()"&Reject&/a&
&a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()"&GetChanges&/a&
&script type="text/javascript"&
//编辑的行
var editIndex =
function endEditing() {
if (editIndex == undefined){return true}
$('#dg').datagrid('endEdit', editIndex);
editIndex =
function onClickCell(index, field){
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', { index: index, field: field });
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
editIndex =
setTimeout(function () {
$('#dg').datagrid('selectRow', editIndex);
function onEndEdit(index, row){
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'productid'
row.productname = $(ed.target).combobox('getText');
function append(){
var index = $('#dg').datagrid('getRowIndex', $('#dg').datagrid('getSelected'));
if (index == -1)
index = 0;
$("#dg").datagrid("insertRow", {
index: index+1,
row: {oper: "&a href='javascript:append()'&+&a& &a href='javascript:removeit()'&-&a&",status:'P'}
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('selectRow', editIndex);
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex =
function accept(){
if (endEditing()){
var $dg = $('#dg');
var rows = $dg.datagrid('getChanges');
if (rows.length) {
var inserted = $dg.datagrid('getChanges', "inserted");
var deleted = $dg.datagrid('getChanges', "deleted");
var updated = $dg.datagrid('getChanges', "updated");
var effectRow = new Object();
if (inserted.length) {
effectRow["inserted"] = JSON.stringify(inserted);
if (deleted.length) {
effectRow["deleted"] = JSON.stringify(deleted);
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
//alert(inserted);
//alert(deleted);
//alert(updated);
//$.post("/Home/Commit", effectRow, function (rsp) {
// if (rsp) {
$dg.datagrid('acceptChanges');
bindData();
//}, "JSON").error(function () {
// $.messager.alert("提示", "提交错误了！");
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex =
function getChanges(){
var rows = $('#dg').datagrid('getChanges');
alert(rows.length+' rows are changed!');
function contains(arr, obj) {
var i = arr.
while (i--) {
if (arr[i] === obj) {
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具datagrid现在具有行编辑能力了，使用时只须在columns中为需要编辑的列添加一个editor属性，编辑保存时同时具有数据校验能力。
看一个例子效果图：
　　代码如下：
$('#tt').datagrid({
title:'Editable DataGrid',
iconCls:'icon-edit',
width:660,
height:250,
singleSelect:true,
idField:'itemid',
url:'datagrid_data.json',
columns:[[
{field:'itemid',title:'Item ID',width:60},
{field:'productid',title:'Product',width:100,
formatter:function(value){
for(var i=0; i&products. i++){
if (products[i].productid == value) return products[i].
type:'combobox',
valueField:'productid',
textField:'name',
data:products,
required:true
{field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},
{field:'attr1',title:'Attribute',width:150,editor:'text'},
{field:'status',title:'Status',width:50,align:'center',
type:'checkbox',
{field:'action',title:'Action',width:70,align:'center',
formatter:function(value,row,index){
if (row.editing){
var s = '&a href="#" onclick="saverow('+index+')"&Save&/a& ';
var c = '&a href="#" onclick="cancelrow('+index+')"&Cancel&/a&';
return s+c;
var e = '&a href="#" onclick="editrow('+index+')"&Edit&/a& ';
var d = '&a href="#" onclick="deleterow('+index+')"&Delete&/a&';
return e+d;
onBeforeEdit:function(index,row){
row.editing =
$('#tt').datagrid('refreshRow', index);
onAfterEdit:function(index,row){
row.editing =
$('#tt').datagrid('refreshRow', index);
onCancelEdit:function(index,row){
row.editing =
$('#tt').datagrid('refreshRow', index);
阅读(...) 评论()EasyUI中的dataGrid的行内编辑
作者：kerryk
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了EasyUI中的dataGrid的行内编辑的实现代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下
这个js代码是别人写的，可能不是最好的，但我个人觉得首先能帮助别人解决功能问题的话就特别好。我稍加修改后用在了自己的项目上了，这里贴出来分享一下。后台用的TinkPHP因为都是查增删改比较简单，这里就不贴了。前台效果图因为比较懒，也不贴了。
$(function () {
//定义全局变量datagrid
var editRow = //定义全局变量：当前编辑的行
datagrid = TskupluAddPacket.datagrid({
url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源
iconCls: 'icon-save', //图标
pagination: true, //显示分页
pageSize: 15, //页大小
pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数
fit: true, //datagrid自适应宽度
fitColumn: false, //列自适应宽度
striped: true, //行背景交换
nowap: true, //列内容多时自动折至第二行
border: false,
idField: 'packetid', //主键
sortName : 'packetid',
//排序字段
sortOrder : 'desc',
//排序方式
columns: [[//显示的列
{field: 'packetid', title: 'ID', width: 100, sortable: true, checkbox: true },
{ field: 'packunit', title: '包装单位', width: 100, sortable: true,
editor: { type: 'validatebox', options: { required: true} }
{ field: 'packqty', title: '包装细数', width: 100,
editor: { type: 'validatebox', options: { required: true} }
{ field: 'packspec', title: '包装规格', width: 100,
editor: { type: 'validatebox', options: { required: true} }
queryParams: {
pluid: $('#addpluid').val()
}, //查询参数
toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
//将新插入的那一行开户编辑状态
datagrid.datagrid("beginEdit", 0);
//给当前编辑的行赋值
editRow = 0;
{ text: '删除', iconCls: 'icon-remove',
handler: function () {
//删除时先获取选择行
var rows = datagrid.datagrid("getSelections");
//选择要删除的行
if (rows.length & 0) {
$.messager.confirm("提示", "你确定要删除吗?", function (r) {
var ids = [];
for (var i = 0; i & rows. i++) {
ids.push(rows[i].packetid);
//将选择到的行存入数组并用,分隔转换成字符串，
//本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
//alert(ids.join(','));
url : ThinkPHP['MODULE'] + '/Tskuplu/deletePacket',
type : 'POST',
ids : ids.join(',')
beforeSend : function (){
$.messager.progress({
text : '正在处理中...'
success : function (data){
$.messager.progress('close');
if (data &0){
datagrid.datagrid('reload');
$.messager.show({
title : '操作提醒',
: data + '条数据被成功删除！'
} else if( data == -999 ) {
$.messager.alert('删除失败', '对不起，您没有权限！', 'warning');
$.messager.alert('删除失败', '没有删除任何数据！', 'warning');
$.messager.alert("提示", "请选择要删除的行", "error");
{ text: '修改', iconCls: 'icon-edit',
handler: function () {
//修改时要获取选择到的行
var rows = datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行修改，否则不操作
if (rows.length == 1) {
//当无编辑行时
if (editRow == undefined) {
//获取到当前选择行的下标
var index = datagrid.datagrid("getRowIndex", rows[0]);
//开启编辑
datagrid.datagrid("beginEdit", index);
//把当前开启编辑的行赋值给全局变量editRow
//当开启了当前选择行的编辑状态之后，
//应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
datagrid.datagrid("unselectAll");
{ text: '保存', iconCls: 'icon-save',
handler: function () {
//保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
datagrid.datagrid("endEdit", editRow);
{ text: '取消编辑', iconCls: 'icon-redo',
handler: function () {
//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit该方法触发此事件
//var row = datagrid.datagrid("getData").rows[rowIndex]; //获取某一行的值
var inserted = datagrid.datagrid('getChanges','inserted');
var updated = datagrid.datagrid('getChanges','updated');
if(inserted.length & 1 && updated.length &1){
datagrid.datagrid('unselectAll');
var url = '';
if(inserted.length&0){
url=ThinkPHP['MODULE'] + '/Tskuplu/addPacket';
if(updated.length&0){
url=ThinkPHP['MODULE'] + '/Tskuplu/updatePacket';
url : url,
type : 'POST',
'pluid': $('#addpluid').val(),
'packetid':rowData.packetid,
'packunit':rowData.packunit,
'packqty' :rowData.packqty,
'packspec':rowData.packspec
beforeSend : function (){
$.messager.progress({
text : '正在处理中...'
success : function (data){
$.messager.progress('close');
if (data & 0){
datagrid.datagrid("acceptChanges");
$.messager.show({
title : '操作提示',
msg : '添加成功'
datagrid.datagrid("reload");
$('#addcheck').val(1);
} else if (data == -999) {
$.messager.alert('添加失败', '抱歉！您没有权限！', 'warning');
datagrid.datagrid("beginEdit",editRow);
$.messager.alert('警告操作', '未知错误！请重新刷新后提交！', 'warning');
datagrid.datagrid("unselectAll");
//////////////////
onDblClickRow: function (rowIndex, rowData) {
//双击开启编辑行
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowI
以上所述是小编给大家介绍的EasyUI中的dataGrid的行内编辑，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具博客分类：
在datagrid可编辑表格里面使用Combobox多选，会出现以下问题：
1、双击编辑然后点击下拉箭头会发现所有的选项都会被选中而无法再次进行选择
2、新增一行combobox选择了多个值后，该行结束编辑时，combobox列显示空白值，选择的值根本就没有设置到单元格
下面来找下原因吧。先来分析下datagrid的beginEdit的源码：
function beginEdit(jq, rowIndex) {
var opts = $.data(jq, "datagrid").
var tr = opts.finder.getTr(jq, rowIndex);
var row = opts.finder.getRow(jq, rowIndex);
if (tr.hasClass("datagrid-row-editing")) {
if (opts.onBeforeEdit.call(jq, rowIndex, row) == false) {
tr.addClass("datagrid-row-editing");
createEditor(jq, rowIndex);
fixEditorSize(jq);
tr.find("div.datagrid-editable").each(function() {
var field = $(this).parent().attr("field");
var ed = $.data(this, "datagrid.editor");//获取到Editor
ed.actions.setValue(ed.target, row[field]);//调用Editor的acions里面的setValue方法赋值
validateRow(jq, rowIndex);
注意这两行代码：
var ed = $.data(this, "datagrid.editor");//获取到Editor ed.actions.setValue(ed.target, row[field]);//调用Editor的acions里面的setValue方法赋值
row[field]是行对应的combobox列的值，这个值是一个字符串，单个值时为'value1'，多个值时则为'value1,value2,..,valueN'
然后我们再看下ed.actions.setValue方法：
combobox : {
init : function(container, options) {
var editor = $("&input type=\"text\"&").appendTo(container);
bobox(options || {});
destroy : function(jq) {
$(jq).combobox("destroy");
getValue : function(jq) {
return $(jq).combobox("getValue");
setValue : function(jq, value) {
$(jq).combobox("setValue", value);
resize : function(jq, width) {
$(jq).combobox("resize", width);
可以看到，action的setValue方法只是单选的值设置，而并不是多选的值设置。问题出现了。既然是多选，就应该用setValues方法，而且values应该是值数组才对啊，而不是setValue(value)啊。
解决方法，扩展改写getValue方法如下：
$.extend($.fn.datagrid.bobox, {
setValue : function(jq, value) {
var opts = $(jq).combobox('options');
if(opts.multiple&&value.indexOf(opts.separator)!=-1){//多选且不只一个值
var values = value.split(opts.separator);
$(jq).combobox("setValues", values);
$(jq).combobox("setValue", value);
OK，双击编辑不能选择的问题解决了~~
下面再来看下新增行combobox多选后保存不了值的问题，同样来看datagrid的endEdit源码：
function stopEdit(jq, rowIndex, revert) {
var opts = $.data(jq, "datagrid").
var updatedRows = $.data(jq, "datagrid").updatedR
var insertedRows = $.data(jq, "datagrid").insertedR
var tr = opts.finder.getTr(jq, rowIndex);
var row = opts.finder.getRow(jq, rowIndex);
if (!tr.hasClass("datagrid-row-editing")) {
if (!revert) {
if (!validateRow(jq, rowIndex)) {
var changed =
var newValues = {};
tr.find("div.datagrid-editable").each(function() {
var field = $(this).parent().attr("field");
var ed = $.data(this, "datagrid.editor");
var value = ed.actions.getValue(ed.target);//通过actions的getValue方法获取到编辑器的值，然后直接赋给单元格
if (row[field] != value) {
row[field] =
newValues[field] =//把编辑器的值赋给单元格
if (changed) {
if (getObjectIndex(insertedRows, row) == -1) {
if (getObjectIndex(updatedRows, row) == -1) {
updatedRows.push(row);
tr.removeClass("datagrid-row-editing");
destroyEditor(jq, rowIndex);
$(jq).datagrid("refreshRow", rowIndex);
if (!revert) {
opts.onAfterEdit.call(jq, rowIndex, row, newValues);
opts.onCancelEdit.call(jq, rowIndex, row);
注意带注释的两行，combobox选择完然后结束编辑，endEdit是调用编辑器的action的getValue方法获取值，然后直接赋值给单元格的。那么看下combobox这个editor的getValue方法：
combobox : {
init : function(container, options) {
var editor = $("&input type=\"text\"&").appendTo(container);
bobox(options || {});
destroy : function(jq) {
$(jq).combobox("destroy");
getValue : function(jq) {
return $(jq).combobox("getValue");//直接赋值，并没有区分是否多选
setValue : function(jq, value) {
$(jq).combobox("setValue", value);
resize : function(jq, width) {
$(jq).combobox("resize", width);
呵呵，两个问题其实都是同一个原因，都没考虑多选的情况，那么同样问题可以这样解决，在上面扩展的基础上，把getValue的方法也改写下：
$.extend($.fn.datagrid.bobox, {
getValue : function(jq) {
var opts = $(jq).combobox('options');
if(opts.multiple){
var values = $(jq).combobox('getValues');
if(values.length&0){
if(values[0]==''||values[0]==' '){
return values.join(',').substring(1);//新增的时候会把空白当成一个值了，去掉
return values.join(',');
return $(jq).combobox("getValue");
setValue : function(jq, value) {
var opts = $(jq).combobox('options');
if(opts.multiple&&value.indexOf(opts.separator)!=-1){//多选且不只一个值
var values = value.split(opts.separator);
$(jq).combobox("setValues", values);
$(jq).combobox("setValue", value);
到此，两个问题都解决了~~
浏览: 156584 次
来自: 广州
UserBean: id,usernameMap&lt ...
HTTP Status 415 -type Status re ...
spring mvc demo教程源代码下载，地址：http: ...
确实可以！！
我试了一下，都不能用。。。。如果在contraller里是放的 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'