EasyUI edatagrid插件使用小计
html片段
<table id="menuview" style="width:100%">
<thead>
<tr>
<th field="ID0" width="5%" fixed="true" checkbox="true"></th>
<th field="TOPIC" width="30%" fixed="true" editor="{type:'validatebox',options:{required:true,missingMessage:'目录名称不能为空。',height:'100px'}}">目录名称</th>
<th field="WJBH" width="10%" fixed="true" editor="text">文件编号</th>
<th field="ARCHUSER" width="10%" fixed="true" editor="text">责任者</th>
<th field="PAGECOUNT" width="5%" fixed="true" editor="numberbox">页数</th>
<th field="YH" width="5%" fixed="true" editor="text">页号</th>
<th field="RQ" width="10%" fixed="true" editor="{ type:'datebox',options:{editable:false}}">日期</th>
<th field="ISSCJNML" width="10%" fixed="true" editor="{ type:'checkbox',options:{on: 1,off:0}}" align="center" formatter="rowCheckBoxFormater">是否生成件内目录</th>
<th field="BZ" width="15%" fixed="true" editor="text">备注</th>
</tr>
</thead>
</table>
javascript 片段
$('#menuview').edatagrid({
idField: 'ID0',//主键
rownumbers: true,//序号
pagination: false,//是否分类
fitColumns: true,//配合列拖动时,禁止列自适应宽度
singleSelect: false, //是否单选,
url: "GetCatalogNew?ARCHGID=" + vARCHGID + "&ISSJ=" + vISSJ,//获取数据url
pageSize: 15,//分页配置
pageList: [15, 30, 45, 60],//分页配置
toolbar: '#tb',//工具
autoSave: false,//是否自动报错
selectOnCheck: true,
checkOnSelect: false,
saveUrl: "CatalogAddYY?ISSJ=" + vISSJ, //新建,都是eadatagrid封装好的,把链接填好就行,点击之后会自动发送json数据包
updateUrl: "CatalogAddYY?ISSJ=" + vISSJ, //保存
destroyUrl: "CatalogAddYY?ISSJ=" + vISSJ, //删除
destroyMsg: {
norecord: { // 在没有记录选择的时候执行
title: '警告',
msg: '没有要删除的记录。'
},
confirm: { // 在选择一行的时候执行
title: '确认',
msg: '您确定要删除吗?'
}
},
onBeforeLoad: function (param) {
},
onLoadSuccess: function (data) {
$(this).datagrid('enableDnd');
},
onLoadError: function () {
},
onDestroy: function (index, row) {
},
onAdd: function (index, row) {
row.ARCHGID = vARCHGID;
},
onBeforeSave: function (index) {
return true;
},
onSave: function (index, row) {
var $datagrid = $('#menuview');
if ($datagrid.data('isSave')) {
//如果需要刷新,保存完后刷新
$datagrid.edatagrid('reload');
$datagrid.removeData('isSave');
}
},
onBeforeDrag: function (row) {
var vSelectRowIndex = $('#menuview').datagrid('getRowIndex', row);//获取选择行索引
var vEditRowIndex = $('#menuview').datagrid('getEditingRowIndexs')//获取编辑行索引
if (vSelectRowIndex == vEditRowIndex) { //防止 编辑行拖动bug
return false;
}
},
//拖拽某行到指定位置后触发
onDrop: function (targetRow, sourceRow, point) {
//获取拖拽后的数据行
var rows = $('#menuview').edatagrid("getRows");
var id0 = "";
var vLength = rows.length;
for (var i = 0; i < vLength; i++) {
id0 += rows[i].ID0 + ",";
}
MaskUtil.mask();
$.post("UpFileOrder?ID0=" + id0 + "&ISSJ=" + vISSJ, function (response) {
$('#menuview').edatagrid("reload");
MaskUtil.unmask();
});
},
toolbar: [{
text: '增加',
iconCls: 'icon-add',
handler: function () {
$('#menuview').edatagrid('addRow');
}
}, {
text: '保存',
iconCls: 'icon-save',
handler: function () {
//标记需要刷新
$('#menuview').data('isSave', true).edatagrid('saveRow');
}
}, {
text: '合并',
iconCls: 'icon-save',
handler: function () {
//标记需要刷新
$('#menuview').data('isSave', true).edatagrid('saveRow');
}
}, {
text: '分割',
iconCls: 'icon-save',
handler: function () {
//标记需要刷新
$('#menuview').data('isSave', true).edatagrid('saveRow');
}
}, '-',
'-', {
text: '删除',
iconCls: 'icon-save',
handler: function () {
delData();
}
}, {
text: '刷新',
iconCls: 'icon-reload',
handler: function () {
$('#menuview').edatagrid('reload');
}
}]
});
});
/*
* datagrid 获取正在编辑状态的行,使用如下:
* $('#id').datagrid('getEditingRowIndexs'); //获取当前datagrid中在编辑状态的行编号列表
*/
$.extend($.fn.datagrid.methods, {
getEditingRowIndexs: function (jq) {
var rows = $.data(jq[0], "datagrid").panel.find('.datagrid-row-editing');
var indexs = [];
rows.each(function (i, row) {
var index = row.sectionRowIndex;
if (indexs.indexOf(index) == -1) {
indexs.push(index);
}
});
return indexs;
}
});
EasyUI edatagrid插件使用小计的更多相关文章
- e3mall商城总结12之购物车的实现、以及购物车小计问题、json406报错
说在前面的话 1.本节主要讲了e3mall购物车的实现方法,我搭建的项目和系统购物车有一些区别,因此这里需要说一下.系统搭建的项目在未登陆的情况下也可以通过cookie进行加入购物车,当用户要下单的时 ...
- SQLSERVER 使用 ROLLUP 汇总数据,实现分组统计,合计,小计
表结构: CREATE TABLE [dbo].[Students]( ,) NOT NULL, ) NULL, [Sex] [int] NOT NULL, ) NULL, ) NULL, , ) N ...
- PB gird类型数据窗口 设置分组、分组小计、合计
今天遇到一个需求,gird表格数据如下: 部门 类型 数据 A 类型1 1 A 类型2 2 B 类型1 3 B 类型2 4 合计 10 实际需要显示的结果为: 部门 ...
- 简单的angular购物车商品小计
<!DOCTYPE html> <html lang="en" ng-app="shopApp"> <head> <m ...
- C#给DataTable添加序号、C#给DataTable添加合计、小计
/// <summary> /// 给DataTable添加序号 /// </summary> /// <param name= ...
- 使用EasyUI的插件前需要引入的文件
一.使用EasyUI的插件需要引入一些文件 1.引入相关文件 easyui.css: easyUi的样式文件 icon.css:easyUI的图标样式文件 easyui.min.js:easyUi的类 ...
- SAP ALV中同一列的不同行显示不同的小数位,并能够总计,小计
物料数量字段,根据物料类型的不同,来显示不同的小数位:要求有点苛刻: 首先,要能够总计和小计的话,这一列的字段类型必须是数值类型. 这样的话,就不能通过截取的方式改变不同行的小数位. 以下是两种思路: ...
- 每日学习心得:SQL查询表的行列转换/小计/统计(with rollup,with cube,pivot解析)
2013-8-20 1. SQL查询表的行列转换/小计/统计(with rollup,with cube,pivot解析) 在实际的项目开发中有很多项目都会有报表模块,今天就通过一个小的SQL ...
- VMProtect使用小计【一】
文章列表 VMProtect使用小计[一] – 初次使用VMProtect使用小计[二] – 加壳查看VMProtect使用小计[三] – 权限管理 说明 VMProtect的功能我就不说了,详情大家 ...
随机推荐
- ExtJs布局中,控件如何水平居中?
如此即可,有图有代码有j8: var formGridHead = Ext.create('Ext.form.Panel', { id: 'MyGridHead', region: 'north', ...
- Cordova打包vue项目(Android)
准备工作: 安装好必要环境: vue-cli,webpack,node.js,android环境 (http://cordova.axuer.com/docs/zh-cn/latest/guide/p ...
- css中vertical-align和line-height的用法
css中vertical-align和line-height的用法 1.先来看一种现象: (1).将一个图片放入一个div块中,div块背景颜色设置为aquamarine.将会发现图片与div块下边沿 ...
- XML简单介绍及举例
可扩展标记语言(eXtensibleMarkup Language,简称XML).是一种标记语言.标记指计算机所能理解的信息符号.通过此种标记,计算机之间能够处理包括各种信息的文章等. 怎样定义这些标 ...
- 几种判断一个整数是否是2的n次方幂的方法
1:简单除法 int i = 128: //待判断的整数 int count = 1: //待判断的整数是2的count次方while (i){if (2 == i){printf("Y ...
- codeforces 689D D. Friends and Subsequences(RMQ+二分)
题目链接: D. Friends and Subsequences time limit per test 2 seconds memory limit per test 512 megabytes ...
- 一:网络--HTTP协议
一.URL 1.基本介绍 URL的全称是Uniform Resource Locator(统一资源定位符) 通过1个URL,能找到互联网上唯一的1个资源 URL就是资源的地址.位置,互联网上的每个资源 ...
- 深入理解JMM(Java内存模型) --(一)
并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之间如何同步(这里的线程是指并发执行的活动实体).通信是指线程之间以何种机制来交换信息.在命令式编程中,线程之间的通信 ...
- choice() 函数
描述 choice() 方法返回一个列表,元组或字符串的随机项. 语法 以下是 choice() 方法的语法: import random random.choice( seq ) 注意:choice ...
- Windows Hadoop安装
由于hadoop版本2.7.1对其他相关工具兼容较好,本文以此版本为例. 一.下载解压 各镜像站现已没有这个版本,所以去Apache官网下载 http://www.apache.org/dyn/clo ...