easyui datagrid 批量编辑和提交数据
easyui datagrid 行编辑和提交方,废话就不多说了,直接上代码
<div style="margin: 5px;">
<table id="dg" class="easyui-datagrid" title="确认单据" style="width: 100%; height: 540px; margin: 20px;"
data-options="loadMsg: '正在加载,请稍候...',
nowrap: false,
border: true,
methord: 'post',
collapsible: false,
fit: false,
fitColumns: false,
remoteSort: true,
rownumbers: true,
pagination: true,
pageSize: 20,
pageList: [20, 30, 40, 50, 100],
striped: true,
toolbar: '#tb',
onClickRow: onClickRow,
singleSelect:false">
<thead>
<tr> <th data-options="field:'obj2',width:140,align:'center',checkbox:true">物料代码</th>
<th data-options="field:'obj1',width:75,display:'none',align:'center'">主键ID</th>
<th data-options="field:'DJID',width:70,align:'center'">单据ID</th>
<th data-options="field:'obj3',width:240,align:'center'">物料描述</th>
<th data-options="field:'obj4',width:75,align:'center'">计划数量</th>
<th data-options="field:'obj5',width:75,align:'center'">计划重量</th>
<th data-options="field:'obj6',width:80,align:'center'">实际入库数量</th>
<th data-options="field:'obj7',width:80,align:'center'">实际入库重量</th>
<th data-options="field:'obj8',width:80,align:'center',editor:'text'">入高架库数量</th>
<th data-options="field:'obj9',width:80,align:'center',editor:{type:'text'}">入高架库重量</th>
<th data-options="field:'obj10',width:80,align:'center',editor:{type:'text'}">入线边库数量</th>
<th data-options="field:'WorkName',width:80,align:'center',editor:{type:'text'}">入线边库重量</th>
</tr>
</thead>
</table>
<div id="tb" style="height: auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存</a>
</div> </div>
界面:注意:
Table的 data-options 属性 onClickRow: onClickRow 属性双击行改变行状态,用于编辑数据
<th data-options="field:'WorkName',width:80,align:'center',editor:{type:'text'}">入线边库重量</th>
其中的
editor:{type:'text'} 属性可以在双击后启用单元格的状态
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
} function accept(){
if (endEditing()){
var rows = $('#dg').datagrid('getChanges');
var $dg=$('#dg');
if ($dg.datagrid('getChanges').length) {
// var inserted = $dg.datagrid('getChanges', "inserted"); //获取添加状态的行
// var deleted = $dg.datagrid('getChanges', "deleted");//获取删除状态的行
var updated = $dg.datagrid('getChanges', "updated");//获取修改状态的行
var effectRow = new Object();
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
}
$.post("/PFK/ashx/UpdateManger.ashx",effectRow, function(rsp) {
debugger;
if(rsp.status){
$.messager.alert("提示", "提交成功!");
$dg.datagrid('acceptChanges');
}
}, "JSON").error(function() {
// $.messager.alert("提示", "提交错误了!");
});
}
}
}
string updated = context.Request["updated"];
List<ShowCCK_DHModle> modelList = null;
if (updated != "")
{
modelList = RFIDScan.CommFunction.JsonDeserialize<List<ShowCCK_DHModle>>(updated);
}
//获取数据后的其他操作
easyui datagrid 批量编辑和提交数据的更多相关文章
- [转]easyui datagrid 批量编辑和提交
web前台主要代码: <script type="text/javascript"> $(function() { var $dg = $("#dg" ...
- Easyui datagrid 批量编辑和提交
<script type="text/javascript"> $(function() { var $dg = $("#dg"); $dg.dat ...
- EASYUI datagrid批量修改与提交
http://www.cnblogs.com/szytwo/archive/2012/08/29/2662169.html 前台主要代码: <script type="text/jav ...
- easyui datagrid可编辑表格使用经验分享
文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...
- 关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为“安徽中控”项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必为每个表写具体的增删 ...
- (转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...
- EasyUI DataGrid能编辑
创建DataGrid <table id="tt"></table> $('#tt').datagrid({ title:'Editable Dat ...
- easyui datagrid行编辑中数据联动
easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...
- EasyUI datagrid 行编辑
一.HTML: <div class="info"> <div class="info_tt"> <span class=&quo ...
随机推荐
- poj1679 次最小生成树 kruskal(暴力枚举)
Description Given a connected undirected graph, tell if its minimum spanning tree is unique. Definit ...
- JS实现 java的Map
Map = function () { this.objects = new Object(); // 加入元素 this.put = function (key, value) { this.obj ...
- 使用rssh创建一个安全的文件服务器
使用rssh创建一个安全的文件服务器 目前有这样一个需求,公司需要一台linux服务器作为文件服务器,但是基于安全性考虑,我不想使用ftp或者samba,但又必须允许用户上传文件.怎么办呢? 因为是l ...
- javascript 中 click 和onclick有什么区别呢
<script type="text/javascript"> $(function(){ $("#btn4").click(function(){ ...
- js判断变量类型,类型转换,
1.typeof 操作符 主要检测基础数据类型 var a="zhangqian"; var b=true; ; var d; var e=null; var f=new Obje ...
- noip 2010 三国游戏
三国游戏 三国游戏 描述 小涵很喜欢电脑游戏,这些天他正在玩一个叫做<三国>的游戏. 在游戏中,小涵和计算机各执一方,组建各自的军队进行对战.游戏中共有N 位武将(N为偶数且不小于4),任 ...
- 最全面的Android Webview详解
转自:最全面的Android Webview详解 前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝.京东.聚划算等等,如下图 那么这种该如何实现呢?其实这是 ...
- xpath和CSS选择器
.content是二进制 用来处理声音.图片.视频 .text是文本 xpath语法: /一层层查找 //不固定位置 //title/text() @选取属性 [@href]和[@href=''] . ...
- hdu 5145(莫队算法+逆元)
NPY and girls Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- HDU 6270 Marriage (2017 CCPC 杭州赛区 G题,生成函数 + 容斥 + 分治NTT)
题目链接 2017 CCPC Hangzhou Problem G 题意描述很清晰. 考虑每个家庭有且仅有$k$对近亲的方案数: $C(a, k) * C(b, k) * k!$ 那么如果在第$1$ ...
注意: