在easyUI 动态绑定部分数据后,需要有部分列可以修改,研究了一天终于搞定。这是小弟的做法,望各位有好招的大侠指点。

1.添加jQuery 和jQuery easyuI的引用。

2.添加id为tt的table和获取行数据测试按钮getChangeValue

<div id="setRoleDiv" style=" display:none;">
<iframe id="frmSetRole" src="" scrolling="no" width="100%" height="100%" frameborder="0">
</iframe>
</div> <input type="button" value="getChangeValue" onclick="showChange()"/>

3.页面加载时通过url调用后台json数据。并对列进行和相关事件,属性绑定。代码如下

    $(function () {
LoadInitData(); //根据查询条件加载列表
$("#btnQuerySearch").click(function (e) {
var strName = $("#searchUName").val();
var strMail = $("#searchMail").val();
LoadInitData({ UserName: strName, Email: strMail });
}); $("#frmEdit").css("display", "none"); }); function LoadInitData(queryParams) {
$('#tt').datagrid(
{
url: '/UserInfo/GetPageUserInfo',
title: '演示表格使用',
width: 'auto',
height: 370,
fitColumns: true,
idField: 'ID',
loadMsg: '正在加载用户的信息...',
pagination: true,
singleSelect: false,
pageSize: 10,
pageNumber: 1,
pageList: [10, 20, 30],
queryParams: queryParams,
columns: [[
{ field: 'ck', checkbox: true, align: 'left', width: 50, height: 40 },
{ field: 'ID', title: '主键', width: 80 },
{ field: 'UserName', title: '用户名', width: 120 },
{ field: 'PassWord', title: '密码', width: 80 },
{ field: 'Email', title: '邮箱', width: 80 },
{ field: 'Address', title: '住址', width: 80 },
{ field: 's', title: 'ss', width: 80, editor: { type: 'numberbox', required:true, options: { precision: 1}} },
{ field: 'CreateDate', title: '提交时间', width: 80, align: 'right',
//日期为null时 此格式不可用,只能加载第一页数据
formatter: function (value, row, index) {
return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S");
}
}
// ,{field:'showprice',title:'商品价格',width:80,align:'right',
// styler:function(value,row,index){
// if (value < 20){
// return 'background-color:#ffee00;color:red;';
// }
// },
// formatter:function(value,row,index){
// return "<a href='#' onclick='editGoodsPrice(" + row.goodsid + ");return false;'>" + value + "</a>";
// }
// }
]],
toolbar: [{
id: 'btnDownShelf',
text: '添加',
iconCls: 'icon-add',
handler: function () {
//显示 添加div层;
$("#addDialog").css("display", ""); //弹出窗口
InitShowAddDialog();
}
}, {
id: 'btnDownShelf',
text: '修改',
iconCls: 'icon-edit',
handler: function () {
dealEdit();
}
}
, {
id: 'btnDownShelf',
text: '删除',
iconCls: 'icon-remove',
handler: function () {
dealDelete();
}
}
, {
id: 'btnSetRole',
text: '设置用户角色',
iconCls: 'icon-redo',
handler: function () {
dealSetRole();
}
},'-', {
text: 'accept',
iconCls: 'icon-save',
handler: function () {
$('#tt').datagrid('acceptChanges');
}
}
],
onHeaderContextMenu: function (e, field) { },
onClickRow: function (e) {
$('#tt').datagrid('beginEdit',e);
}
}); }

以上代码注意

(1)触发可编辑的列(ss)需要添加editors列属性editor: { type: 'numberbox', required:true, options: { precision: 1}}

(2)通过grid的onClickRow事件触发可编辑的列(ss)。
  onClickRow: function (e) {
                   $('#tt').datagrid('beginEdit',e);//'beginEdit‘方法必须有一个参数
                }

(3)接受改变值,并获取选中列的值

function showChange() {
            $('#tt').datagrid('acceptChanges');//'acceptChanges'方法提交所有修改的数据,提交后的数据将不能再修改或者回滚。
            var data = $('#tt').datagrid('getSelections');

//提交数据给后台 ,后台只需反序列化就ok,代码如下:

if (rows.length<1) {
           $.messager.alert("消息提示", "至少选择一条数据保存");
           }
         else {
          var jsonDataStr = "";
         jsonDataStr = JSON.stringify(rows);

$.post("/User/Add.ashx", { "data": jsonDataStr }, function () {

});
         }

}

结果如下图

jQuery easyuI datagrid 多行编辑的更多相关文章

  1. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  2. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  3. jquery easyui datagrid设置可编辑行的某个列不可编辑

    function onClickRowd(index1, field1) { if (editIndexd != index1) { if (endEditing()) { $('#dg').data ...

  4. jquery easyui datagrid设置行样式 不可删除某行

    rowStyler: function (index,row) { if (parseInt(row.ksrs) > 0) { return 'color:red'; } }, onLoadSu ...

  5. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  6. jquery easyui datagrid 获取Checked选择行(勾选行)数据

    原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...

  7. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

  8. JQuery easyUi datagrid 中 editor 动态设置最大值最小值

    前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考.   问题 JQuery easyUi datagri ...

  9. JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列

    转自   http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...

随机推荐

  1. *5. Longest Palindromic Substring (dp) previous blogs are helpful

    Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...

  2. 使用正则表达式验证IP地址

    实现效果: 知识运用: 实现代码: public bool validate(string str_IP) { string regex = @"(25[0-5]|2[0-4]\d|[0-1 ...

  3. Vuex基础-State

    官方地址:https://vuex.vuejs.org/zh/guide/state.html 由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个 ...

  4. P2341 [HAOI2006]受欢迎的牛

    P2341 [HAOI2006]受欢迎的牛 塔尔羊标准模板(我才不会告诉你我嘴里含着一个九省联考的出题人) 不会劈配.林克卡特树.制胡窜 我还会叉粪宿主,梳妆素组,西安段素 #include<c ...

  5. iPad游戏 Calcculator: The Game 程序自动计算求解方法

    今天在iPad上下了个小游戏,主要是一个计算器的界面,有开始值,目标值,限定步数,以及一些加减乘除,还有作者脑洞想出来的功能键,主要有左移,直接把一个数加到末尾,将其中的某个数改为另一个数等等..玩到 ...

  6. 洛谷P3611 [USACO17JAN]Cow Dance Show奶牛舞蹈

    题目描述 After several months of rehearsal, the cows are just about ready to put on their annual dance p ...

  7. Redis连接工具类

    Redis连接工具类 导包 测试一下(junit) package com.test; import org.junit.Test; import redis.clients.jedis.Jedis; ...

  8. 协议 - OSI七层网络协议模型

    摘自:https://www.cnblogs.com/oneplace/p/5611094.html 互联网协议 本文全文转载阮一峰老师的两篇文章,自己做了一些添加内容 参考:互联网协议入门(一) 互 ...

  9. JAVA / MySql 编程——第七章 JDBC

    1.JDBC:JDBA是Java数据库连接(Java DataBase Connectivity)技术的简称,提供连接各种常用数据库的能力:         ●Java是通过JDBC技术实现对各种数据 ...

  10. 【php】关于trim,rtrim,ltrim,substr 的字符串切割导致 json,_encode无法 识别数据的问题

    示例 <?php $a = rtrim('南宁 .',' .'); echo $a; //输出 南�� echo json_encode($a); //输出空白 $b = ['name'=> ...