JqueryUI表格编辑-与后端交互问题
来源:互联网 发布:java初中高级工程师 编辑:程序博客网 时间:2024/06/07 16:36
datagrid表格实现编辑
- 问题描述
datagrid 表格编辑时并没有修改然而却在数据库中保留了数据,并刷新前端
if(changes){ $.post(url,param,function(data){});}
问题解决方案
分析:发现下面都不该调用后端然而却调用了,原因是没有编辑然而onAfterEdit(index, row, changes){}事件中changes不为空处理方法:修改编辑器,在编辑结束事件中做判断
解决实现
// 扩展datagrid编辑器-单元格编辑(直接从demo中拷贝做相应修改)$.extend($.fn.datagrid.methods, { editCell: function(jq,param){ return jq.each(function(){ var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields',true).concat( $(this).datagrid('getColumnFields')); for(var i=0; i<fields.length; i++){ var col = $(this).datagrid('getColumnOption', fields[i]); col.editor1 = col.editor; if (fields[i] != param.field){ col.editor = null; } } $(this).datagrid('beginEdit', param.index); var ed = $(this).datagrid('getEditor', param); if (ed){ // 给options对象添加编辑前值属性 opts.oldHtml = ed.oldHtml; if ($(ed.target).hasClass('textbox-f')){ $(ed.target).textbox('textbox').focus(); } else { $(ed.target).focus(); } } for(var i=0; i<fields.length; i++){ var col = $(this).datagrid('getColumnOption', fields[i]); col.editor = col.editor1; } }); }, enableCellEditing: function(jq){ return jq.each(function(){ var dg = $(this); var opts = dg.datagrid('options'); opts.oldOnClickCell = opts.onClickCell; opts.onClickCell = function(index, field){ if (opts.editIndex != undefined){ if (dg.datagrid('validateRow', opts.editIndex)){ dg.datagrid('endEdit', opts.editIndex); opts.editIndex = undefined; } else { return; } } else{ // 这里修改原来的if 为if-else 这样体验会更好 dg.datagrid('selectRow', index).datagrid('editCell', { index: index, field: field }); opts.editIndex = index; opts.oldOnClickCell.call(this, index, field); } } }); } });// 给opopns 添加编辑后处理事件onAfterEdit:function(index,row,changes){ // 过滤为{} 的情况 for(var key in changes) { var opts = $('#dg').datagrid('options'); // 过滤为空或者数字情况 if(changes[key] != opts.oldHtml) { var url ='...'; var updateParams = $.extend(params,{"key":key,"value":changes[key]}); $.post(url,updateParams,function(data){}); } opts.oldHtml = ""; }}// 强烈建议 datagrid 提供编辑功能初始化时提供 onClickCell事件,要不然会出现一些不必要问题
treegrid 表格编辑功能
// treegrid 继承了datagrid 所以单元格编辑扩展依然可用// 只需要注意 treegrid 的onAfterEdit(row,changes)方法没有index属性
阅读全文
0 0
- JqueryUI表格编辑-与后端交互问题
- Ajax实现将可以编辑的表格与数据库交互
- Ajax实现将可以编辑的表格与数据库交互
- javascript服务器交互型可编辑表格
- jQueryUI之交互
- 前后端交互乱码问题处理
- 前后端交互的问题(php)
- 前端 ,后端 关于数据交互的问题
- 解决ajax与后端的json交互的415错误问题
- Flask与Ajax前后端交互的跨域访问问题
- Web 后端--PHP 与数据库的交互
- AngularJS与后端php的数据交互
- JS的Ajax与后端交互数据
- vue-Resource(与后端数据交互)
- 如何使用angularJS与后端进行交互
- ajax使用,前端与后端交互
- dnnRadiobutton与Jqueryui冲突
- LigerUI编辑表格组件单元格校验问题
- Batch Normalization
- MySQL数据库触发器(trigger)的创建
- 软件测试系列之四 单元测试(Junit)
- 记录自己学到东西-2017-08-26
- 拦截器和过滤器的区别
- JqueryUI表格编辑-与后端交互问题
- logistic 回归
- 微信小程序--ajax服务器交互及页面渲染
- Io流——将对象序列化和反序列化
- Apache Security-4 SSL(Security Socket Layer)
- JavaScript模板
- ArcGIS中ObjectID,FID和OID字段有什么区别?
- 编译、链接与库
- 你不努力,有什么资格抱怨(转)(文/蒋文伟)