datagrid可编辑表格
使用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可编辑表格的更多相关文章
- easyui datagrid可编辑表格使用经验分享
文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...
- LigerUI编辑表格组件单元格校验问题
这几天在使用LigerUI(版本为1.2.2)编辑表格组件的时候,遇到几个小问题,从官方demo和api中没有找到解决的办法 问题1.从数据库查询出来的主键单元格不可编辑问题 主键单元格已经保存之前编 ...
- 实现Easyui 可编辑表格
一.前端框架使用的easyui框架 二.后端使用的是jfinal 三.效果图 四.html代码 <div id="table_tree" class="easyui ...
- Easyui 编辑表格行删除
1.问题描述 easyui 编辑表格新增一条数据后,删除最后一行删除不了,原因是没有提交数据acceptChanges. 源码中deleteRow方法,根据坐标获取行html,方法为opts.find ...
- EasyUI/TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 numberbox
这两天研究了一下topjui的可编辑表格edatagrid,想在每一列的后面根据返回的数据判断是使用 combobox 还是 numberbox,期间遇到了一些坑,下面实现代码,需要的朋友可以参考一下 ...
- JavaScript- jquery easyui 可编辑表格插件 easyui.editgrid
最近项目前端使用 jquery+easyui来做,用了几个月,觉得easyui是一个很不错的开源前端UI框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累 都一一解决了,其中比较典型的就 ...
- [HTML]HTML5实现可编辑表格
HTML5实现的简单的可编辑表格 [HTML]代码 <!DOCTYPE html > <html > <head> <meta charset="u ...
- EasyUI DataGrid能编辑
创建DataGrid <table id="tt"></table> $('#tt').datagrid({ title:'Editable Dat ...
- Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...
随机推荐
- css3clock.js - 一个用CSS3与纯js实现的简单时钟
前言 项目代码明细可以查看我Github上的源码:https://github.com/nelsonkuang/css3clock.js 实现思路 主要是用CSS3控制时针.分针和秒针旋转:时针每12 ...
- 关于WORD文档的读取乱码问题
一直以来都是用File类操作txt文档,今天想尝试能不能打开word文档,无奈,尝试了UTF8,Unicode,Default....等编码方式,打开文件都是乱码,电脑甚至发出警报声. 以下只取一种编 ...
- 【ORACLE】ORA-12537 问题整理
ORA-12537主要是ORALCE 监听问题,今天帮同事处理问题时,他问道一种情况,开始连接很正常,后续多次出现ORA-12537问题 简单整理了下 一般请况下 1-检查数据库服务器是否没有启动监听 ...
- ejoy2d源码阅读笔记1
一直想学lua,学它如何与C结合来作逻辑,所以找了云风的一份代码来研究.这份代码是个框架库,叫ejoy2d,据云风的博客说,他们最新的手机游戏用的就是这套框架,所以实用性应该很强,虽然我不是学游戏的, ...
- java分享第十七天-02(封装操作excel类)
java解析EXCEL用的是POI的JAR包,兼容EXCEL2003及2007+版本的EXCEL所需要的JAR包:poi-3.8.jarpoi-ooxml.jarpoi-ooxml-schemas. ...
- html5地理位置定位功能小析
Geolocationd 基本原理1.GPS GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置.适用于具备GPS功能的设备(1)优点:在 ...
- js Date学习
Date.parse()接收一个表示日期的字符串参数(参数错误时返回NaN),返回相应日期的毫秒数.(使用自 UTC(Coordinated Universal Time,国际协调时间)1970 年 ...
- thinkphp 缓存数据
thinkphp 中内置了缓存操作 3.1版本的数据缓存方法是cache 基本用法: S(array('type'=>'xcache','expire'=>60)); 缓存初始化 缓存初始 ...
- Python之路第一课Day8--随堂笔记(socket 承接上节---网络编程)
本节内容 Socket介绍 Socket参数介绍 基本Socket实例 Socket实现多连接处理 通过Socket实现简单SSH 通过Socket实现文件传送 作业:开发一个支持多用户在线的FTP程 ...
- SQL Server 2012基本知识
1:图形化界面设置外键 解决:table->选中表->design->选中需要设置外键的字段->选择"关系"->选择"添加"-&g ...