easyui datagrid编辑（easyui datagrid 编辑的时候只能编辑一行，当要编辑下一行时这行取消编辑！）

本文目录

• easyui datagrid 编辑的时候只能编辑一行，当要编辑下一行时这行取消编辑！
• easyUI中datagrid 将 text 设为不可编辑，该怎么处理
• easyui datagrid 在编辑完成后在js,ajax提交之前进行验证,拦截
• EasyUI的datagrid弹框编辑的问题
• easyui中怎样修改DataGrid中的某个单元格的值

easyui datagrid 编辑的时候只能编辑一行，当要编辑下一行时这行取消编辑！

《script type = "text/javascript"》
var editindex = undefined;
function onClickRow(index)//这是触发行事件
{
if(endediting()){
$(’#dg’).datagrid(’selectRow’,index).datagrid(’beginedit’,index)//其中beginEdit方法为datagrid的方法，具体可以参看api
editIndex = index;//给editIndex对象赋值，index为当前行的索引
}else {
$(’#dg’).datagrid(’selectRow’,edtiIndex);
}
}
}
function endEditing()
{
if(editIndex == undefined) {return true;}//如果为undefined的话，为真，说明可以
if($(’#dg’).datagrid(’validateRow’,editIndex)) {
#(’#dg’).datagrid(’endEdit’,editIndex);//当前行事件取消
editIndex = undefined; return true;//重置行索引对象，返回真，允许
}else{return false;}//否则，为假，返回假，不允许
}
《/script》
再将onClickRow()方法加在你需要的datagrid中，easyuidatagrid中存在一个onClickRow，点击行事件，对应上就可以了。还可以设置点击行的颜色，后的颜色，很有意思，具体参看api,希望能帮到你。

easyUI中datagrid 将 text 设为不可编辑，该怎么处理

1、

var vareditor=$(’#datagridId’).datagrid(’getEditor’, { index:rowIndex, field:’fieldName’ );

vareditor.target.prop(’readonly’, true);

2、扩展datagrid字段的editor

$.extend($.fn.datagrid.defaults.editors, {

    textReadonly: {

        init: function (container, options) {

            var input = $(’《input type="text" readonly="readonly" class="datagrid-editable-input"》’).appendTo(container);

            return input;

        },

        getValue: function (target) {

            return $(target).val();

        },

        setValue: function (target, value) {

            $(target).val(value);

        },

        resize: function (target, width) {

            var input = $(target);

            if ($.boxModel == true) {

                input.width(width - (input.outerWidth() - input.width()));

            } else {

                input.width(width);

            }

        }

    }

});

然后字段的editor：’textReadonly’

easyui datagrid 在编辑完成后在js,ajax提交之前进行验证,拦截

1.自定义一个类用于对应datagrid的数据
public class Category
{
public int Id { get; set; }
public string Name { get; set; }
}
2.前台js提交
var _list = {};
var rows = $(’#list_data’).datagrid(’getRows’);
for (var i = 0; i 《 rows.length; i++) {
var row = rows;
_list.Id; //这里list要和后台的参数名List《Category》 list一样
_list.Name;
}
$.ajax({
url: ’/Admin/Category/SaveList’,
data: _list,
dataType: "json",
type: "POST",
success: function (data) {
alert(data.rows + "," + data.result);
}
});
3.后台代码
public ActionResult SaveList(List《Category》 list)
{
string result = "";
foreach (var m in list)
result += m.Name + ",";
//供前台测试返回结果
return Json(new { rows = list.Count.ToString(), result = result });
}
4.在FireFox的Firebug显示post数据：
list.Id 1
list.Name test111
list.Id 2
list.Name test2
list.Id 3
list.Name test3

EasyUI的datagrid弹框编辑的问题

给个我们项目里的一个文件给你参考下吧

jsp页面

《%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %》
    《% String path=request.getContextPath(); String basePath=request.getScheme()
    + "://" + request.getServerName() + ":" + request.getServerPort() + path
    + "/"; %》
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
    《title》《/title》
    《link rel="stylesheet" type="text/css" href="《%=basePath%》js/easyui/themes/default/easyui.css" /》
《link rel="stylesheet" type="text/css" href="《%=basePath%》js/easyui/themes/icon.css" /》
《link rel="stylesheet" type="text/css" href="《%=basePath%》css/cloudmgr.css" /》
    《script type="text/javascript" src="《%=basePath%》js/easyui/jquery.min.js"》《/script》
《script type="text/javascript" src="《%=basePath%》js/easyui/jquery.easyui.min.js"》《/script》
《script type="text/javascript" src="《%=basePath%》js/easyui/locale/easyui-lang-zh_CN.js"》《/script》
《script type="text/javascript" src="《%=basePath%》js/public.js"》《/script》
《script type="text/javascript" src="《%=basePath%》pages/cloudmgr/dict.js"》《/script》
《style type="text/css"》
.texthgt{
height:60px !important;
}
《/style》
《/head》
《body scroll="no"》
    《table id="datagrid"  class="easyui-datagrid" data-options="rownumbers:true,
fitColumns:true,
singleSelect:false,
toolbar:’#tb’,
height:540,
loadMsg:’数据加载中,请稍后...’,
url:’dictAction.do?action=getAllDicts’,
method:’post’" title="集群字典管理"》
        《thead》
            《tr》
                《th data-options="field:’ck’,checkbox:true"》选择《/th》
                《th data-options="field:’id’,width:80"》ID《/th》
                《th data-options="field:’type’,width:80"》类型《/th》
                《th data-options="field:’key’,width:80"》键《/th》
                《th data-options="field:’value’,width:80"》值《/th》
                《th data-options="field:’value2’,width:80"》值2《/th》
                《th data-options="field:’desc’,width:80"》描述《/th》
            《/tr》
        《/thead》
    《/table》
    《div id="tb" style="padding:2px 5px;"》
类型 : 《input class="easyui-textbox toolbar-text" id="search_dictid" style="width:110px"》
        《a href="#" class="easyui-linkbutton search-button" id="search"》查询《/a》
        《a href="#" class="easyui-linkbutton operate-button" id="delete"》删除《/a》
        《a href="#" class="easyui-linkbutton operate-button" id="modify"》修改《/a》
        《a href="#" class="easyui-linkbutton operate-button" id="add"》增加《/a》
    《/div》
    《div id="edit-window" title=""》
        《div style="padding: 10px 60px 20px 60px;"》
            《form id="ff" method="post"》
            《table cellpadding="5"》
                《tr》
                    《td》类型:《/td》
                    《td》《input class="easyui-textbox" type="text" id="edit_type" name="search.type" data-options="required:true"》《/input》《/td》
                《/tr》
                《tr》
                    《td》键:《/td》
                    《td》《input class="easyui-textbox" type="text" id="edit_key" name="search.key" data-options="required:true"》《/input》《/td》
                《/tr》
                《tr》
                    《td》值:《/td》
                    《td》《input class="easyui-textbox" type="text" id="edit_value" name="search.value" data-options="required:true,multiline:true"》《/input》《/td》
                《/tr》
                《tr》
                    《td》值2:《/td》
                    《td》《input class="easyui-textbox" type="text" id="edit_value2" name="search.value2" data-options="required:false"》《/input》《/td》
                《/tr》
                《tr》
                    《td》描述:《/td》
                    《td》《input class="easyui-textbox" type="text" id="edit_desc" name="search.desc" data-options="required:false,multiline:true"》《/input》《/td》
                《/tr》
            《/table》
        《/form》
        《div style="text-align:center;padding:5px"》
            《a href="javascript:void(0)" class="easyui-linkbutton form-button" id="submitForm"》提交《/a》
            《a href="javascript:void(0)" class="easyui-linkbutton form-button" id="clearForm"》清除《/a》
        《/div》
        《/div》
    《/div》
《/body》
《/html》

dict.js内容

//by weixj
$(function(){
$("#search").click(function(){
        var queryParams = $(’#datagrid’).datagrid(’options’).queryParams;  
        queryParams.search_dictid = search_dictid.value;
        $("#datagrid").datagrid(’reload’);
    });
    
    $("input",$("#search_dictid").next("span")).keydown(function(event){
  var val = $(this).val();
  if(event.keyCode == 13){
    var queryParams = $(’#datagrid’).datagrid(’options’).queryParams;  
        queryParams.search_dictid = val;
        $("#datagrid").datagrid(’reload’);
  }
});
    
    var $win = $(’#edit-window’).window({
    title: ’字典’,
    width: 380,
    height: 400,
    top: ($(window).height() - 330) * 0.5,
    left: ($(window).width() - 380) * 0.5,
    shadow: true,
    modal: true,
    closed: true,
    minimizable: false,
    maximizable: false,
    collapsible: false
});
    
    var form = $win.find("form");
    
    $("#edit_value").siblings("span").addClass("texthgt");
$("#edit_value").siblings("span").children("textarea").addClass("texthgt");
    $("#edit_desc").siblings("span").addClass("texthgt");
$("#edit_desc").siblings("span").children("textarea").addClass("texthgt");
    
    $("#add").click(function(){
$win.window(’open’);
form.form(’clear’);
form.url=’dictAction.do?action=addDict’;
    });
    
    $("#submitForm").click(function(){
    form.form(’submit’, {
        url: form.url,
        success: function (data) {
            data = toJson(data);
            if(data.flag == 0){
                $("#datagrid").datagrid(’reload’);
                $win.window(’close’);
            }else{
                $.messager.alert(’错误’, data.flag, ’error’);
            }
        }
    });
    });
    
    $("#clearForm").click(function(){
    form.form("clear");
    });
    
    $("#modify").click(function(){
    form.form("clear");
    var rows = $(’#datagrid’).datagrid(’getSelections’);
    if(rows.length == 0 || rows.length 》 1){
    $.messager.alert(’警告’, ’请选择一条记录!’, ’warning’);
    return;
    }
    var dictid = rows.id;
    $.ajax({
    url:’dictAction.do?action=getOneDict&search.dictid=’+dictid,
    type:’POST’,
    success:function(data){
    data = toJson(data);
    var dictinfo = data.dictInfo;
    $win.window(’open’);
    $("#edit_type").textbox(’setValue’,dictinfo.type);
    $("#edit_key").textbox(’setValue’,dictinfo.key);
    $("#edit_value").textbox(’setValue’,dictinfo.value);
    $("#edit_value2").textbox(’setValue’,dictinfo.value2);
    $("#edit_desc").textbox(’setValue’,dictinfo.desc);
    form.url=’dictAction.do?action=modDict&search.dictid=’+dictid;
    },
    error:function(){
    $.messager.alert(’错误’, ’操作失败!’, ’error’);
    }
    });
    });
    
    $("#delete").click(function(){
    var rows = $(’#datagrid’).datagrid(’getSelections’);
    if(rows.length == 0){
    $.messager.alert(’警告’, ’请至少选择一条记录!’, ’warning’);
    return;
    }
    $.messager.confirm("操作提示", "您确定要删除这些字典吗？", function (data) {
            if(data){
            var dictids=’’;
    for(var i=0;i《rows.length;i++){
    if(i》0){
    dictids += ",";
    }
    dictids += rows.id;
    }
    $.ajax({
    url:’dictAction.do?action=delDict&search.dictid=’+dictids,
    type:’POST’,
    success:function(data){
    data = toJson(data);
            if(data.flag == 0){
                $("#datagrid").datagrid(’reload’);
            }else{
                $.messager.alert(’错误’, data.flag, ’error’);
            }
    },
    error:function(){
    $.messager.alert(’错误’, ’操作失败!’, ’error’);
    }
    });
            }
        });
    });
})

easyui中怎样修改DataGrid中的某个单元格的值

我现在也是找解决办法呢！
不过，如果你是想通过JS，这个方法可以实现：
如： var rows = $(’#tt’).datagrid(’getSelections’);
if (rows.length == 1) {
var date=$(’#tt’).datagrid(’getData’);
for(var i=0;i《date.rows.length;i++){
date.rows.a;
}
}
这个方法可以把所有行的a列值改为选中行的a列值
类似的，你的问题可以这样解决
但是，改变后的值，只有你再次其他行时，才可以看到，或者你对修改的数据保存，再重新载入