这一篇我们将对datagrid editor属性来进行详解
功能:1.点击添加,在首行上面添加一行,2.双击时编辑一行,3.删除选中所有行数,
就以以上三个功能的实现做解释
1.写在editor()中的url加参数不可行,因为初使化datagrid与其combotree时就已定死,所以改为更合理的方式
center_datagrid=$('#center_datagrid').datagrid({ url://获取数据 columns:[[ {field:'cid',title:'id',width:50,hidden:false,align:'center',checkbox:true}, {field:'cname',title:'角色',width:90,align:'center',editor:{type:'validatebox',options:{required:true}}}, {field:'cdesc',title:'描述',width:200,align:'center',editor:{type:'validatebox'}}, {field:'authId',title:'权限id',width:50,hidden:true,align:'center'}, {field:'authName',title:'权限',width:450,align:'center', editor:{type:'combotree',options:{multiple:true,checkbox:true,lines:true,onClick:function(node){ //editorValue=$(editorT.target).combotree('getChecked');//三种状态值,默认为'checked' //$(editorT.target).combotree('setValues',editorValue); }} }}]], toolbar:[{ text:'添加', iconCls:'icon-add', handler:function(){ //alert("add"); add(); } },'-',{ text:'删除', iconCls:'icon-remove', handler:function(){ remove(); } },'-',{ text:'编辑', iconCls:'icon-edit', handler:function(){ edit(); } },'-',{ text:'取消编辑', iconCls:'icon-cancel', handler:function(){ } },'-',{ text:'保存', iconCls:'icon-save', handler:function(){ save(); } }], onDblClickRow:function(rowIndex,rowData){ },onBeforeEdit:function(rowIndex, rowData){ //编辑时选中 //清除所有选中的 //获取选中的那一行数据 var row=center_datagrid.datagrid('getSelected'); $.ajax({}); },onAfterEdit:function(rowIndex, rowData, changes){ }}); });
//下面是上面骨架详细实现,详细请看源代码http://download.csdn.net/detail/u011252234/9670064
<script type="text/javascript"> var center_datagrid; var editorRow=undefined; var editorValue; var editorNameText; var editorDesText; var editorT; var str=[]; var b=true; var dataCombotree; //http://www.cnblogs.com/kexb/p/3685913.html //url:'${pageContext.request.contextPath}/authController/combotree?editorValue='+editorValue, $(function(){ center_datagrid=$('#center_datagrid').datagrid({ url:'${pageContext.request.contextPath}/roleController/datagrid', fit:true, nowrap:false, checkOnSelect:true, selectOnCheck:false, border:0, columns:[[ {field:'cid',title:'id',width:50,hidden:false,align:'center',checkbox:true}, {field:'cname',title:'角色',width:90,align:'center',editor:{type:'validatebox',options:{required:true}}}, {field:'cdesc',title:'描述',width:200,align:'center',editor:{type:'validatebox'}}, {field:'authId',title:'权限id',width:50,hidden:true,align:'center'}, {field:'authName',title:'权限',width:450,align:'center', editor:{type:'combotree',options:{multiple:true,checkbox:true,lines:true,onClick:function(node){ //editorValue=$(editorT.target).combotree('getChecked');//三种状态值,默认为'checked' //$(editorT.target).combotree('setValues',editorValue); }},onCheck:function(node, checked){ //editorValue=$(editorT.target).combotree('getChecked');//三种状态值,默认为'checked' //$(editorT.target).combotree('setValues',editorValue); } }}]], toolbar:[{ text:'添加', iconCls:'icon-add', handler:function(){ //alert("add"); add(); } },'-',{ text:'删除', iconCls:'icon-remove', handler:function(){ remove(); } },'-',{ text:'编辑', iconCls:'icon-edit', handler:function(){ edit(); } },'-',{ text:'取消编辑', iconCls:'icon-cancel', handler:function(){ if(editorRow!=undefined){ center_datagrid.datagrid('endEdit',editorRow); editorRow=undefined; center_datagrid.datagrid('reload'); } } },'-',{ text:'保存', iconCls:'icon-save', handler:function(){ save(); } }], onDblClickRow:function(rowIndex,rowData){ if(editorRow!=undefined){ center_datagrid.datagrid('endEdit',editorRow); editorRow=undefined; } if(editorRow==undefined){ center_datagrid.datagrid('beginEdit',rowIndex); editorRow=rowIndex; editorT=center_datagrid.datagrid('getEditor',{index:editorRow,field:'authName'}); //editorText=$(editor.target).combotree('getText'); $(editorT.target).combotree('setValues',[]); //加载数据 $(editorT.target).combotree('loadData',dataCombotree); } },onBeforeEdit:function(rowIndex, rowData){ //编辑时选中 //清除所有选中的 center_datagrid.datagrid('unselectAll'); center_datagrid.datagrid('selectRow',rowIndex); //获取选中的那一行数据 var row=center_datagrid.datagrid('getSelected'); //是否为空对象 if(!$.isEmptyObject(row)){ editorValue=row.authName.split(";").join(","); } //editorValue=$(editor.target).combotree('getValue'); //post是异步 /* $.post('${pageContext.request.contextPath}/authController/combotree',{editorValue:editorValue},function(data){ dataCombotree=data; },'json'); */ //需要的是同步 $.ajax({url:'${pageContext.request.contextPath}/authController/combotree',data:{editorValue:editorValue}, type :"post", dataType : "json", async : false, success:function(data){ dataCombotree=data; }}); },onAfterEdit:function(rowIndex, rowData, changes){ }}); }); //方法 function add(){ //在第一行添加一行 if(editorRow!=undefined){ center_datagrid.datagrid('endEdit',editorRow); editorRow=undefined; } if(editorRow==undefined){ center_datagrid.datagrid('insertRow',{ index:0, row:{ } }); //进入编辑状态 center_datagrid.datagrid('beginEdit',0); editorRow=0; //加载数据 editorT=center_datagrid.datagrid('getEditor',{index:editorRow,field:'authName'}); //editorText=$(editor.target).combotree('getText'); $(editorT.target).combotree('setValues',[]); //选中编辑的这一行 center_datagrid.datagrid('selectRow',0); //加载数据 $(editorT.target).combotree('loadData',dataCombotree); } } function remove(){ var ids=""; var b=false; var rows=center_datagrid.datagrid('getChecked'); if(!$.isEmptyObject(rows)){ for(var i=0;i<rows.length;i++){ if(b){ ids+=","+rows[i].cid; }else{ ids+=rows[i].cid; b=true; } } $.ajax({ url:'${pageContext.request.contextPath}/roleController/delete', type:"post", data:{ids:ids}, success:function(data){ var json=$.parseJSON(data); if(json.success){ $.messager.show({ title:'提示', msg:json.msg }); center_datagrid.datagrid('reload'); }else{ $.messager.show({ title:'提示', msg:json.msg }); } } }); } } function edit(){ var str=center_datagrid.datagrid('getSelections'); if(str.length==1){ if(editorRow!=undefined){ center_datagrid.datagrid('endEdit',editorRow); } }else if(str.length>1){ $.messager.alert('提示','不允许多行编辑,请选择一行!'); }else{ $.messager.alert('提示','请请中一行,再进行编辑'); } } function save(){ //editorValue=$(editorT.target).combotree('getValue');//这个只能获取一个值 editorValue=$(editorT.target).combotree('getValues'); editorValue=editorValue.join(","); //editorText=$(editorT.target).combotree('getText');//这个获取所有的文本 var row=center_datagrid.datagrid('getSelected'); if($.isEmptyObject(row)){ editorNameText=center_datagrid.datagrid('getEditor',{index:0,field:'cname'}); editorDesText=center_datagrid.datagrid('getEditor',{index:0,field:'cdesc'}); //validatebox的值获取 row.cname=$(editorNameText.target).val(); row.cdesc=$(editorDesText.target).val(); } //row.authName; //row.authId; $.ajax({ url:'${pageContext.request.contextPath}/roleController/saveOrUpdate', type:"post", data:{editorValue:editorValue,cid:row.cid,cname:row.cname,cdesc:row.cdesc}, success:function(data){ var json=$.parseJSON(data); if(json.success){ $.messager.show({ title:'提示', msg:json.msg }); center_datagrid.datagrid('endEdit',editorRow); center_datagrid.datagrid('reload'); }else{ $.messager.show({ title:'提示', msg:json.msg }); } } }); } </script>
相关推荐
jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jquery-easyui 插件很实用。能很好的对树、表格数据进行操作。里面附带例子
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制计算机,而不是计算机控制用户;减少用户的记忆负担;保持界面一致。 给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头...
jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件,也可以单独使用...
解决EasyUIdataGrid列比较多,无数据,列展现不全
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
jquery easyui的压缩包,以及easyui的一些拓展插件包,包括Portal(制作图表、列表、球形图等),数据网格视图(DataGrid View),可编辑的数据网格(Editable DataGrid),表格编辑单元格(Cell Editing in ...
jqueryEasyUI中的dataGrid实现的表格的增删改查,后台使用servlet,有数据库源码
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
研究了好久,终于成功在jquery easyui中的datagrid中添加searchbox!
最近在用jquery做页面,当datagrid放置数字文本框时输入小数会自动四舍五入,然后加了小数位数限制时不能输入小数点了。 最后发现是easyui1.4的bug,把这个补丁引入进去就好了
本篇文章主要介绍jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】 。datagrid现在具有行编辑能力了,可以添加和编辑数据,同时对行内数据上移下移。
用jquery easyui datagrid作表格时候,用此js制作出分组效果,包含例子。
jQuery EasyUI是一个旨在辅助HTML5打造更好的Web界面的框架,而其中的Datagrid组件也是非常强大,这里我们就来看一下jQuery EasyUI框架中的Datagrid数据表格组件结构详解
数据表格行样式 - DataGrid Custom Row Style 数据表格页脚行 - DataGridFooter Row 树形数据表格 - TreeGrid 数据表格显示页脚 - TreeGrid 带分页的树形数据表格 -TreeGrid 属性表格 - PropertyGrid ...
在easyui中datagrid、combobox、tree等组件都不能显示含有html标签的特殊字符,因为这些字符会被当作html标签被解析掉。这里给出了一个处理方案,希望对大家有帮助。 以datagrid为例: 找到jquery.datagrid.js文件,...
这是我自己总结出来easyui-textbox和easyui-combobox的onchange事件响应实例,绝对可用,网上很多实例都无法运行,这个我亲自测试可用使用才传上来的,供大家参考学习。
jQuery EasyUI API 中文文档 - DataGrid数据表格使用说明,需要的朋友可以参考下。