这个js代码是别人写的,可能不是最好的,但我个人觉得首先能帮助别人解决功能问题的话就特别好。我稍加修改后用在了自己的项目上了,这里贴出来分享一下。后台用的TinkPHP因为都是查增删改比较简单,这里就不贴了。前台效果图因为比较懒,也不贴了。
$(function () {
var datagrid; //定义全局变量datagrid
var editRow = undefined; //定义全局变量:当前编辑的行
datagrid = TskupluAddPacket.datagrid({
url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源
iconCls: 'icon-save', //图标
pagination: true, //显示分页
pageSize: 15, //页大小
pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数
fit: true, //datagrid自适应宽度
fitColumn: false, //列自适应宽度
striped: true, //行背景交换
nowap: true, //列内容多时自动折至第二行
border: false,
idField: 'packetid', //主键
sortName : 'packetid', //排序字段
sortOrder : 'desc', //排序方式
columns: [[//显示的列
{field: 'packetid', title: 'ID', width: 100, sortable: true, checkbox: true },
{ field: 'packunit', title: '包装单位', width: 100, sortable: true,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'packqty', title: '包装细数', width: 100,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'packspec', title: '包装规格', width: 100,
editor: { type: 'validatebox', options: { required: true} }
}
]],
queryParams: {
pluid: $('#addpluid').val()
}, //查询参数
toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加,修改,删除等
//添加时如果没有正在编辑的行,则在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
row: {}
});
//将新插入的那一行开户编辑状态
datagrid.datagrid("beginEdit", 0);
//给当前编辑的行赋值
editRow = 0;
}
}
}, '-',
{ text: '删除', iconCls: 'icon-remove',
handler: function () {
//删除时先获取选择行
var rows = datagrid.datagrid("getSelections");
//选择要删除的行
if (rows.length > 0) {
$.messager.confirm("提示", "你确定要删除吗", function (r) {
if (r) {
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].packetid);
}
//将选择到的行存入数组并用,分隔转换成字符串,
//本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
//alert(ids.join(','));
$.ajax({
url : ThinkPHP['MODULE'] + '/Tskuplu/deletePacket',
type : 'POST',
data : {
ids : ids.join(',')
},
beforeSend : function (){
$.messager.progress({
text : '正在处理中...'
});
},
success : function (data){
$.messager.progress('close');
if (data >0){
datagrid.datagrid('reload');
$.messager.show({
title : '操作提醒',
msg : data + '条数据被成功删除!'
})
} else if( data == -999 ) {
$.messager.alert('删除失败', '对不起,您没有权限!', 'warning');
} else {
$.messager.alert('删除失败', '没有删除任何数据!', 'warning');
}
}
});
}
});
} else {
$.messager.alert("提示", "请选择要删除的行", "error");
}
}
}, '-',
{ text: '修改', iconCls: 'icon-edit',
handler: function () {
//修改时要获取选择到的行
var rows = datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行修改,否则不操作
if (rows.length == 1) {
//当无编辑行时
if (editRow == undefined) {
//获取到当前选择行的下标
var index = datagrid.datagrid("getRowIndex", rows[0]);
//开启编辑
datagrid.datagrid("beginEdit", index);
//把当前开启编辑的行赋值给全局变量editRow
editRow = index;
//当开启了当前选择行的编辑状态之后,
//应该取消当前列表的所有选择行,要不然双击之后无法再选择其他行进行编辑
datagrid.datagrid("unselectAll");
}
}
}
}, '-',
{ text: '保存', iconCls: 'icon-save',
handler: function () {
//保存时结束当前编辑的行,自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
datagrid.datagrid("endEdit", editRow);
editRow = undefined;
}
}, '-',
{ text: '取消编辑', iconCls: 'icon-redo',
handler: function () {
//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
}, '-'],
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit该方法触发此事件
//var row = datagrid.datagrid("getData").rows[rowIndex]; //获取某一行的值
var inserted = datagrid.datagrid('getChanges','inserted');
var updated = datagrid.datagrid('getChanges','updated');
if(inserted.length < 1 && updated.length <1){
editRow = undefined;
datagrid.datagrid('unselectAll');
return;
}
var url = '';
if(inserted.length>0){
url=ThinkPHP['MODULE'] + '/Tskuplu/addPacket';
}
if(updated.length>0){
url=ThinkPHP['MODULE'] + '/Tskuplu/updatePacket';
}
$.ajax({
url : url,
type : 'POST',
data : {
'pluid': $('#addpluid').val(),
'packetid':rowData.packetid,
'packunit':rowData.packunit,
'packqty' :rowData.packqty,
'packspec':rowData.packspec
},
beforeSend : function (){
$.messager.progress({
text : '正在处理中...'
})
},
success : function (data){
$.messager.progress('close');
if (data > 0){
datagrid.datagrid("acceptChanges");
$.messager.show({
title : '操作提示',
msg : '添加成功'
});
editRow = undefined;
datagrid.datagrid("reload");
$('#addcheck').val(1);
} else if (data == -999) {
$.messager.alert('添加失败', '抱歉!您没有权限!', 'warning');
} else {
datagrid.datagrid("beginEdit",editRow);
$.messager.alert('警告操作', '未知错误!请重新刷新后提交!', 'warning');
}
datagrid.datagrid("unselectAll");
}
});
//////////////////
},
onDblClickRow: function (rowIndex, rowData) {
//双击开启编辑行
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
});
});
以上所述是小编给大家介绍的EasyUI中的dataGrid的行内编辑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“EasyUI中的dataGrid的行内编辑”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2025年10月26日
2025年10月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]