使用datagrid对商品数量和单价进行修改

$(function() {
var $dg = $("#zhong");
$dg.datagrid({
url : "getTestList.action",
width : 600,
height : 250,
columns : [ [ {field:'id',checkbox:true},
{
field : 'spid',
title : '商品id',
width : 100
},
{
field : 'spname',
title : '商品名称',
width : 100
},{
field : 'spnub',
title : '数量',
width : 100,
editor : "numberbox"
}, {
field : 'spdj',
title : '价格',
width : 100,
align : 'right',
editor : "numberbox"
},{
field : 'jyjhj',
title : '建议进货价',
width : 100,
align : 'right'
} ] ],
singleSelect:true,//是否单选
pagination:true,//显示分页栏
rownumbers:true,//显示行号
pageList:[5,10,20,50],//每页行数选择列表
pageSize:5,//初始页面大小
toolbar : [ {
text : "编辑",
iconCls : "icon-edit",
handler : function() {
var row = $dg.datagrid('getSelected');
if (row) {
var rowIndex = $dg.datagrid('getRowIndex', row);
$dg.datagrid('beginEdit', rowIndex);
}
}
}, {
text : "删除",
iconCls : "icon-remove",
handler : function() {
var row = $dg.datagrid('getSelected');
var data= $('#zhong').datagrid('getSelected');
if (row) {
var rowIndex = $dg.datagrid('getRowIndex', row);
$dg.datagrid('deleteRow', rowIndex);
$.get("deleteTest.action?spid="+data.spid);
} }
}, {
text : "结束编辑",
iconCls : "icon-cancel",
handler :endEdit
}, ],
rownumbers:true,//显示行号
striped:true,//斑马线效果 onDblClickRow : function(rowIndex, rowData) {
var row = $dg.datagrid('getSelected');
if (row) {
var rowIndex = $dg.datagrid('getRowIndex', row);
$dg.datagrid('beginEdit', rowIndex);
}
}, onAfterEdit:function(index , data){                           //编辑成功后自动提交数据修改数据库中数据 var data =$('#zhong').datagrid('getSelected');
$.post("updateTest.action?spid="+data.spid+"&spnub="+data.spnub+"&spdj="+data.spdj+"&jyjhj="+data.jyjhj,
function(result){
$.messager.show({
title:'提示信息',
msg:'操作成功',
});
}
);
}
}); function endEdit(){                                
var rows = $dg.datagrid('getRows');
for ( var i = 0; i < rows.length; i++) {
$dg.datagrid('endEdit', i);
}
}
});

datagrid可编辑表格的更多相关文章

  1. easyui datagrid可编辑表格使用经验分享

    文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...

  2. LigerUI编辑表格组件单元格校验问题

    这几天在使用LigerUI(版本为1.2.2)编辑表格组件的时候,遇到几个小问题,从官方demo和api中没有找到解决的办法 问题1.从数据库查询出来的主键单元格不可编辑问题 主键单元格已经保存之前编 ...

  3. 实现Easyui 可编辑表格

    一.前端框架使用的easyui框架 二.后端使用的是jfinal 三.效果图 四.html代码 <div id="table_tree" class="easyui ...

  4. Easyui 编辑表格行删除

    1.问题描述 easyui 编辑表格新增一条数据后,删除最后一行删除不了,原因是没有提交数据acceptChanges. 源码中deleteRow方法,根据坐标获取行html,方法为opts.find ...

  5. EasyUI/TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 numberbox

    这两天研究了一下topjui的可编辑表格edatagrid,想在每一列的后面根据返回的数据判断是使用 combobox 还是 numberbox,期间遇到了一些坑,下面实现代码,需要的朋友可以参考一下 ...

  6. JavaScript- jquery easyui 可编辑表格插件 easyui.editgrid

    最近项目前端使用 jquery+easyui来做,用了几个月,觉得easyui是一个很不错的开源前端UI框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累 都一一解决了,其中比较典型的就 ...

  7. [HTML]HTML5实现可编辑表格

    HTML5实现的简单的可编辑表格 [HTML]代码 <!DOCTYPE html > <html > <head> <meta charset="u ...

  8. EasyUI DataGrid能编辑

    创建DataGrid <table id="tt"></table> $('#tt').datagrid({     title:'Editable Dat ...

  9. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

随机推荐

  1. css3clock.js - 一个用CSS3与纯js实现的简单时钟

    前言 项目代码明细可以查看我Github上的源码:https://github.com/nelsonkuang/css3clock.js 实现思路 主要是用CSS3控制时针.分针和秒针旋转:时针每12 ...

  2. 关于WORD文档的读取乱码问题

    一直以来都是用File类操作txt文档,今天想尝试能不能打开word文档,无奈,尝试了UTF8,Unicode,Default....等编码方式,打开文件都是乱码,电脑甚至发出警报声. 以下只取一种编 ...

  3. 【ORACLE】ORA-12537 问题整理

    ORA-12537主要是ORALCE 监听问题,今天帮同事处理问题时,他问道一种情况,开始连接很正常,后续多次出现ORA-12537问题 简单整理了下 一般请况下 1-检查数据库服务器是否没有启动监听 ...

  4. ejoy2d源码阅读笔记1

    一直想学lua,学它如何与C结合来作逻辑,所以找了云风的一份代码来研究.这份代码是个框架库,叫ejoy2d,据云风的博客说,他们最新的手机游戏用的就是这套框架,所以实用性应该很强,虽然我不是学游戏的, ...

  5. java分享第十七天-02(封装操作excel类)

     java解析EXCEL用的是POI的JAR包,兼容EXCEL2003及2007+版本的EXCEL所需要的JAR包:poi-3.8.jarpoi-ooxml.jarpoi-ooxml-schemas. ...

  6. html5地理位置定位功能小析

    Geolocationd 基本原理1.GPS    GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置.适用于具备GPS功能的设备(1)优点:在 ...

  7. js Date学习

    Date.parse()接收一个表示日期的字符串参数(参数错误时返回NaN),返回相应日期的毫秒数.(使用自 UTC(Coordinated Universal Time,国际协调时间)1970 年 ...

  8. thinkphp 缓存数据

    thinkphp 中内置了缓存操作 3.1版本的数据缓存方法是cache 基本用法: S(array('type'=>'xcache','expire'=>60)); 缓存初始化 缓存初始 ...

  9. Python之路第一课Day8--随堂笔记(socket 承接上节---网络编程)

    本节内容 Socket介绍 Socket参数介绍 基本Socket实例 Socket实现多连接处理 通过Socket实现简单SSH 通过Socket实现文件传送 作业:开发一个支持多用户在线的FTP程 ...

  10. SQL Server 2012基本知识

    1:图形化界面设置外键 解决:table->选中表->design->选中需要设置外键的字段->选择"关系"->选择"添加"-&g ...