easyui datagrid url不请求请求_easyui中datagrid添加单元格编辑事件

最新推荐文章于 2024-07-29 01:32:22 发布
最新推荐文章于 2024-07-29 01:32:22 发布
阅读量300 收藏
点赞数
文章标签： easyui datagrid url不请求请求 easyui datagrid 不分页 easyui datagrid重新加载detailview异常 easyui获取datagrid的值 easyui表格编辑事件

1.easyui中datagrid添加单元格编辑事件

这部分代码实现两个功能

(1)在进行选择行的时候在页脚统计已选数据需要计算字段的和

(2)有一个字段可以进行编辑，在编辑完成后也要在页脚完成对该字段的统计

根据昨天的内容，可以完成不编辑字段的统计，今天的重点是需要编辑字段的统计。

代码如下：

$('#whxdg').datagrid({

fit:true,

singleSelect:false,

toolbar: '#whxtb',

showFooter:'true',

url:getRootPath()+'/handverify/findDfInfo.do?customer='+code+'&pk_org='+pk_org+'&status=2',

columns:[[

{field:'ck',checkbox:true},

{field:'BILLNO',title:'单据号',width:200,align:'center'},

{field:'BILLTYPE',title:'单据类型',width:200,align:'center'},

{field:'JINE',title:'金额',width:200,align:'center'},

{field:'YHXJE',title:'已核销金额',width:200,align:'center'},

{field:'MONEY_CR',title:'未核销金额',width:200,align:'center'},

{field:'XGHXJE',title:'修改核销金额',width:200,align:'center',editor:{type:'numberbox',options:{precision:0},min:0}},

{field:'BILLDATE',title:'单据日期',width:200,align:'center'},

{field:'HEADID',title:'单据日期',width:200,align:'center',hidden:true},

{field:'BODYID',title:'单据日期',width:200,align:'center',hidden:true}

]],

//添加单击事件，

onClickCell: function(index,field,value){

if(field == 'XGHXJE'){

$(this).datagrid('beginEdit', index);

var ed = $(this).datagrid('getEditor', {index:index,field:'XGHXJE'});

$(ed.target).focus();

}else{

$(this).datagrid('endEdit', index);

}

},

onSelect:function (index,row){

$(this).datagrid('endEdit',index);

var rows = $('#whxdg').datagrid('getFooterRows'); //获取底部页脚信息

var foot_row = rows[0];

var XGHXJE = row.XGHXJE;

if(XGHXJE == ""){

XGHXJE = 0;

}

rows[0]['JINE'] = (parseFloat(row.JINE)+parseFloat(rows[0].JINE)).toFixed(2);

rows[0]['YHXJE'] = (parseFloat(row.YHXJE)+parseFloat(rows[0].YHXJE)).toFixed(2);

rows[0]['MONEY_CR'] = (parseFloat(row.MONEY_CR)+parseFloat(rows[0].MONEY_CR)).toFixed(2);

rows[0]['XGHXJE'] = (parseFloat(XGHXJE)+parseFloat(rows[0].XGHXJE)).toFixed(2);

$('#whxdg').datagrid('reloadFooter');

},

onUnselect:function (index,row){

var rows = $('#whxdg').datagrid('getFooterRows');

//alert(row.HXJETZ);

var row_XGHXJE = 0;

var foot_row = rows[0];

if(row.XGHXJE != ""){

row_XGHXJE = row.XGHXJE;

}

rows[0]['JINE'] = (parseFloat(rows[0].JINE) - parseFloat(row.JINE)).toFixed(2);

rows[0]['YHXJE'] = (parseFloat(rows[0].YHXJE) - parseFloat(row.YHXJE)).toFixed(2);

rows[0]['MONEY_CR'] = (parseFloat(rows[0].MONEY_CR) - parseFloat(row.MONEY_CR)).toFixed(2);

rows[0]['XGHXJE'] = (parseFloat(rows[0].XGHXJE) - parseFloat(row.XGHXJE)).toFixed(2);

$('#whxdg').datagrid('reloadFooter');

},

onSelectAll:function (rows){

var foot_JINE = 0;

var foot_YHXJE = 0;

var foot_MONEY_CR = 0;

var foot_XGHXJE = 0;

for(var i = 0;i < rows.length;i++){

var XGHXJE = rows[i].XGHXJE;

if(XGHXJE == ""){

XGHXJE = 0;

}

$(this).datagrid('endEdit', i);

foot_JINE = (parseFloat(foot_JINE) + parseFloat(rows[i].JINE)).toFixed(2);

foot_YHXJE = (parseFloat(foot_YHXJE) + parseFloat(rows[i].YHXJE)).toFixed(2);

foot_MONEY_CR = (parseFloat(foot_MONEY_CR) + parseFloat(rows[i].MONEY_CR)).toFixed(2);

foot_XGHXJE = (parseFloat(foot_XGHXJE) + parseFloat(XGHXJE)).toFixed(2);

}

var foot_rows = $('#whxdg').datagrid('getFooterRows');

foot_rows[0]['JINE'] = foot_JINE;

foot_rows[0]['YHXJE'] = foot_YHXJE;

foot_rows[0]['MONEY_CR'] = foot_MONEY_CR;

foot_rows[0]['XGHXJE'] = foot_XGHXJE;

$('#whxdg').datagrid('reloadFooter');

},

onUnselectAll:function (rows){

var foot_rows = $('#whxdg').datagrid('getFooterRows');

foot_rows[0]['JINE'] = "0";

foot_rows[0]['YHXJE'] = "0";

foot_rows[0]['MONEY_CR'] = "0";

foot_rows[0]['XGHXJE'] = "0";

$('#whxdg').datagrid('reloadFooter');

}

});

通过js加载datagrid代码如上所示，通过onSelect，onUnselect，onSelectAll和onUnselectAll四个方法完成对页脚数据的统计。方法中重要代码：

(1)var foot_rows = $('#whxdg').datagrid('getFooterRows'):获取底部页脚行信息；

(2)foot_rows[0]['JINE'] = foot_JINE;以该格式对不同的字段进行赋值

(3)$('#whxdg').datagrid('reloadFooter');重新加载页脚行数据

除此之外，通过单击事件获取需要编辑的字段：思路入下：

(1)只有单击需要编辑的字段时，该字段才进入编辑状态，同时，该行数据为onUnselect(取消选中)状态，这样做为了便于统计。主要代码：

$(this).datagrid('beginEdit', index);//开启该行数据的编辑状态

var ed = $(this).datagrid('getEditor', {index:index,field:'XGHXJE'});//获取需要编辑的字段

$(ed.target).focus();//设置该字段为焦点(即把光标移到该字段上)

(2)单击该行其他单元格时，该行退出编辑，同时，该行数据为onSelect(选中)状态，这样做同样是为了便于统计。

$(this).datagrid('endEdit', index);//结束该行数据编辑

(3)如果没有单击其他单元格，直接勾选行首的选中单元格或者进行全选操作，同样结束行数据的编辑状态，并进行统计。

$(this).datagrid('endEdit', index);//结束该行数据编辑，需要写入到onSelect和onSelectAll中。

57cb6caebb2f48d550f4a10c2c15e423.png

编辑时为选中状态

2ff295f2dcded4d7f84387eff11bd3db.png

表格字段编辑状态

2.通过js和html共同完成上述功能

(1)html代码

data-options="iconCls:'icon-edit'"

toolbar="#yhxtb"fit="true" showFooter="true">

主键本方单据号本方单据类型对方单据号对方单据类型核销金额应核销金额总核销金额未核销金额核销金额调整

(2)js代码

$(function(){

$('#yhxdg').datagrid({

//添加单击事件，

onClickCell: function(index,field,value){

if(field == 'HXJETZ'){

$(this).datagrid('beginEdit', index);

var ed = $(this).datagrid('getEditor', {index:index,field:'HXJETZ'});

$(ed.target).focus();

}else{

$(this).datagrid('endEdit', index);

}

},

//核销明细选择事件

onCheck:function (index,row){

$(this).datagrid('endEdit',index);

var rows = $('#yhxdg').datagrid('getFooterRows');

//alert(row.HXJETZ);

var row_HXJETZ = 0;

var foot_row = rows[0];

if(row.HXJETZ != ""){

row_HXJETZ = row.HXJETZ;

}

rows[0]['YHXJE'] = (parseFloat(row.YHXJE)+parseFloat(rows[0].YHXJE)).toFixed(2);

rows[0]['HXJE'] = (parseFloat(row.HXJE)+parseFloat(rows[0].HXJE)).toFixed(2);

rows[0]['ZHXJE'] = (parseFloat(row.ZHXJE)+parseFloat(rows[0].ZHXJE)).toFixed(2);

rows[0]['ZWHXJE'] = (parseFloat(row.ZWHXJE)+parseFloat(rows[0].ZWHXJE)).toFixed(2);

rows[0]['HXJETZ'] = (parseFloat(row_HXJETZ)+parseFloat(rows[0].HXJETZ)).toFixed(2);

//rows[0]['salary'] = 60000;

$('#yhxdg').datagrid('reloadFooter');

},

onUncheck:function (index,row){

var rows = $('#yhxdg').datagrid('getFooterRows');

//alert(row.HXJETZ);

var row_HXJETZ = 0;

var foot_row = rows[0];

if(row.HXJETZ != ""){

row_HXJETZ = row.HXJETZ;

}

rows[0]['YHXJE'] = (parseFloat(rows[0].YHXJE) - parseFloat(row.YHXJE)).toFixed(2);

rows[0]['HXJE'] = (parseFloat(rows[0].HXJE) - parseFloat(row.HXJE)).toFixed(2);

rows[0]['ZHXJE'] = (parseFloat(rows[0].ZHXJE) - parseFloat(row.ZHXJE)).toFixed(2);

rows[0]['ZWHXJE'] = (parseFloat(rows[0].ZWHXJE) - parseFloat(row.ZWHXJE)).toFixed(2);

rows[0]['HXJETZ'] = (parseFloat(rows[0].HXJETZ) - parseFloat(row_HXJETZ)).toFixed(2);

//rows[0]['salary'] = 60000;

$('#yhxdg').datagrid('reloadFooter');

},

onCheckAll:function (rows){

var foot_YHXJE = 0;

var foot_HXJE = 0;

var foot_ZHXJE = 0;

var foot_ZWHXJE = 0;

var foot_HXJETZ = 0;

for(var i = 0;i < rows.length;i++){

var HXJETZ = 0;

if(rows[i].HXJETZ != ""){

HXJETZ = rows[i].HXJETZ;

}

$(this).datagrid('endEdit',i);

foot_YHXJE = (parseFloat(foot_YHXJE) + parseFloat(rows[i].YHXJE)).toFixed(2);

foot_HXJE = (parseFloat(foot_HXJE) + parseFloat(rows[i].HXJE)).toFixed(2);

foot_ZHXJE = (parseFloat(foot_ZHXJE) + parseFloat(rows[i].ZHXJE)).toFixed(2);

foot_ZWHXJE = (parseFloat(foot_ZWHXJE) + parseFloat(rows[i].ZWHXJE)).toFixed(2);

foot_HXJETZ = (parseFloat(foot_HXJETZ) + parseFloat(HXJETZ)).toFixed(2);

}

var foot_rows = $('#yhxdg').datagrid('getFooterRows');

foot_rows[0]['YHXJE'] = foot_YHXJE;

foot_rows[0]['HXJE'] = foot_HXJE;

foot_rows[0]['ZHXJE'] = foot_ZHXJE;

foot_rows[0]['ZWHXJE'] = foot_ZWHXJE;

foot_rows[0]['HXJETZ'] = foot_HXJETZ;

//rows[0]['salary'] = 60000;

$('#yhxdg').datagrid('reloadFooter');

},

onUncheckAll:function (rows){

var foot_rows = $('#yhxdg').datagrid('getFooterRows');

foot_rows[0]['YHXJE'] = "0";

foot_rows[0]['HXJE'] = "0";

foot_rows[0]['ZHXJE'] = "0";

foot_rows[0]['ZWHXJE'] = "0";

foot_rows[0]['HXJETZ'] = "0";

//rows[0]['salary'] = 60000;

$('#yhxdg').datagrid('reloadFooter');

}

});

})

功能和主要实现代码如上。

前端相关文章链接：

easyui中datagrid页脚数据动态刷新以及JS获取项目的绝对路径

Oracle相关文章链接

Oracle学习日记——高级查找

Oracle查询基础

Oracle学习日记——时间日期范围处理

MySQL相关文章链接

MySQL学习系列之十——联结

MySQL学习系列之十二——组合查询

MySQL学习系列之八——分组数据

【easyui】 datagrid 属性事件常用
z767327552的专栏
03-07 1948
// DataGrid var valuedata; var textdata; var buildGrid = function () { $('#tt').datagrid({ title:', url: ' ', //数据填充路径 rownumbers: true, //开启列 fit: true, //自适
JQuery DataGrid 中文文档
LEE_ZCF
04-05 4881
数据表格 继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。 依赖关系 控制面板缩放链接按钮分页 使用方法 table id="tt">table>   $('#tt').datagrid({       url:'datagrid_data.js
easyUI datagrid 表格事件部分
b0303的博客
02-11 732
DataGrid其中与选择，勾选相关 DataGrid属性： singleSelectboolean如果为true，则只允许选择一行。false ctrlSelectboolean在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作。（该属性自1.3.6版开始可用） checkOnSelectboolean如果为true，当用户点击行的时候该复选框就会被选中或取消选中。如果为false，当用户仅在点击该复选框的时候才会呗选中或取消。（该属性自1.3版开始可用）true s...
easyui 的dategrid通过某个单元格点击触发事件
03-01 1121
easyui 的dategrid通过某个单元格点击触发事件
easyui datagrid url不请求请求_Java框架从入门到装逼，用EasyUI绘制主界面
weixin_39746552的博客
11-29 238
1.引入资源包在上一节中，我们把基本的框架都搭好了，用了Spring，SPringMVC。这一节，我们先来画页面，前端框架采用EasyUI来实现。 easyui是一种基于jQuery的用户界面插件集合，使用easyui我们就不需要写很多代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。 现在，我们把easyui需要的资源包拷贝进来。2.绘制主界面界面的话，我们就用html来实现吧，在W...
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
10-21
本文介绍了如何在 jQuery Easyui DataGrid 中实现点击某个单元格后，该单元格即可进入编辑状态，当用户编辑完数据并把焦点移开该单元格时，所编辑的数据自动保存的功能。 知识点一：DataGrid 初始化与配置 要使用 ...
easyui datagrid editor回车切换单元格示例，可参考
12-27
easyui datagrid editor回车切换单元格示例，适合熟悉easyui但又不懂如何做的人员，可能参考一下源码JS。
easyui datagrid中实现上下左右、回车切换单元格
12-14
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
jquery Easyui Datagrid实现批量操作（编辑，删除，添加）
10-20
本篇文章主要讲述了如何利用jquery Easyui库中的Datagrid组件实现批量操作功能，包括编辑、删除以及添加新行。jquery Easyui 是一个基于jquery的前端UI框架，其中Datagrid组件专门用于展示和管理表格数据。通过这篇...
easyUi 中 datagrid 的各种事件
weixin_33866037的博客
05-16 412
easyUi 中的datagrid 中的各种事件属性: $("#dataGrid").datagird({ 　　sortName: ' ', 　　sortOrder:'asc/desc', 　　columns:[[ {title:'标题',field:'muser_id',sortable:true,hidden:true},{},{} ]] 　　pagination:true...
easyui datagrid 增加鼠标悬停弹窗事件
08-21
easyui1.4.5增加一个鼠标滑过行，注意是行不是列，然后弹出框显示某些关键信息，如经典的图片预览操作，内容提供demo，并附修改方法，这个方法是修改的源码，没有增加扩展实现，若愿意请自行实现
EasyUI DataGrid 编辑单元格
hffygc的博客
11-12 429
EasyUI DataGrid 编辑单元格
无序单链表排序算法(c语言版本)
雪峰流云
03-21 6971
这是一道非常经典的面试题。我们知道，快速排序的思想是，通过一个基准元素(pivot)，一趟排序就将数据划分为两个部分：左边的部分小于该基准元素，右边的部分大于该基准元素。另外，实现快速排序的关键在于随机访问数据元素，所以快速排序通常都是基于数组来实现的，但是面试中往往会要求对无序单链表进行快排，这就明显不能使用快速排序的基本思想，因为从链表尾部无法向链表头部遍历。 解决方法还是基于快速排序思想，...
easyui datagrid url不请求请求_浅谈url
weixin_39999859的博客
11-06 512
url的组成部分主要有：协议，域名，路径，查询参数，锚点协议http协议和https协议http协议默认端口好80https协议默认端口号443域名每个域名都对应一个ip（internet protocol网络协议）每个上网的设备都有一个独立的ipip分为内网ip和外网ip域名是相对网站来说的ip是相对于网络来说的通过DNS（域名系统Domain Name System）将域名解析成ip地址当你在...
easyui datagrid url不请求请求_不跳步骤的新手python爬虫系列教程（三）
weixin_39882589的博客
11-26 308
代码不是看出来的，而是敲出来的，欢迎关注公众号，收藏教程，跟着步骤练习爬虫，成为真正的Spider Man。 在第一篇教程里(不跳步骤新手python爬虫教程(一))我们学习了安装python、运行python、下载IDE: Pycharm(代码编辑器)以及浏览器的网络请求等相关知识内容。 在第二篇教程里(不跳步骤新手python爬虫教程(二))认识了两种网络协议http、https、对请求行...
easyui 点击单元格的时候，获取该行另外一个字段的值
最新发布
极客栈
07-29 604
通过绑定 DataGrid 的 ​​ 事件，可以轻松地在单击单元格时获取该行的其他字段值。这个方法适用于各种场景，比如在用户点击某个单元格时显示额外的信息、执行特定的操作等。希望这个示例能帮助你更好地理解和应用 EasyUI DataGrid 的事件处理。
[Easy UI ]DataGrid 首次进入页面时，不加载任何数据
weixin_30731305的博客
09-01 866
首次不加载数据问题，必须搞明白如何才能不加载数据。根据Easu UI的官方API：http://www.jeasyui.com/documentation/ 仔细观察DataGrid的事件当中有一个这样的描述： 根据这个我们给onBeforeLoad事件绑定如下的事件: onBeforeLoad: function (param) { ...
EasyUI的DataGrid中url参数返回数据格式 （视图层和Controller层交互）
anping_wang的博客
09-29 1767
DataGrid组件中的url是一个url链接，通过发送请求url，返回需要的数据，返回的数据需要按照约定的数据格式，这样才能在视图层正确的显示。 绑定数据两种形式：1、url后端返回视图数据 2、data直接显示 一、从Controller层返回视图层的数据格式 {total：''，rows：[{},{}]} total 是总数，表示和数据库进行交互，符合条件的记录的总条数 r...
easyUI使用datagrid（通过url从后台取数据）
可可爱爱❀葱葱子的博客
07-23 3102
代码可直接复用 var machineGrid;//网格定义 var url = PATH.BASEPATH+'/omPlatform/cluster/getSecondCatalog?userName='+userName1+'&upPath='+upPath1+'&times='+secondTimes1; $(function(){ getDateGrid(); }); /** * 载入数据 */ function getDateGrid(){ if(machineGrid){
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值