这一篇我们将对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>
相关推荐
在EasyUI框架中,jQuery扮演着桥梁的角色,使得开发者能更轻松地控制页面元素,并利用EasyUI提供的组件进行交互设计。 在文件列表中,“1漂亮的jquery easyui后台框架”可能是一个示例项目,展示如何使用EasyUI创建...
总结,jQuery EasyUI Datagrid 是一款强大的表格组件,它简化了数据展示和操作的复杂性,为开发者提供了丰富的功能和高度的灵活性。通过理解和掌握它的使用,你可以构建出功能丰富、用户体验优秀的数据驱动的 Web ...
jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...
Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件,常用于表格数据的展示和操作,支持分页、排序、过滤、编辑等功能。通过阅读这份文档,我们可以了解 Datagrid 的基本配置和高级特性,以及如何与后端数据源进行...
在"jquery-easyui-1.5完整源码.zip"这个压缩包中,包含了EasyUI 1.5版本的完整源代码,这对于我们深入理解其工作原理、定制功能或优化性能具有极大的帮助。 首先,我们关注的是"src"文件夹。这个文件夹中的内容是...
标签中的"easyui-java"表示项目使用了EasyUI与Java的结合,"easyui-datagrid"是EasyUI中的一个关键组件,用于展示表格数据。"jeasyui"可能指的是jQuery-EasyUI,它是EasyUI的一个扩展,提供了更多的jQuery插件和组件...
在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
Datagrid 是 jQuery EasyUI 中用于展示和操作表格数据的重要组件。在1.2版本中,它支持数据分页、排序、过滤、编辑等功能,使得数据的展示和管理更为便捷。例如,开发者可以通过简单的配置实现数据的增删改查,同时...
在 "jquery-easyui-1.3.2" 版本中,官方提供了一系列的演示,涵盖了各个组件的基本用法和复杂功能,让开发者可以快速上手。 1. **DataGrid**:数据网格是EasyUI的重要组件,用于展示和操作表格数据。在demo中,你...
这个压缩包“jquery-easyui-1.5.5.6”包含了该框架的1.5.5.5版本,这是一份重要的更新,可能包含了一些性能优化和新功能。 在该压缩包中,有几个关键文件和目录: 1. `jquery.easyui.min.js`:这是jQuery EasyUI的...
jQuery EasyUI是前端开发中的一款强大工具,它基于流行的JavaScript库jQuery,旨在为Web开发者提供一套便捷的UI组件,以快速构建功能丰富且设计精美的用户界面。这个框架的核心理念是简化工作流程,减少代码量,使...
DataGrid是用于展示大量结构化数据的表格形式,它支持排序、分页、过滤、编辑等功能。jQuery EasyUI的DataGrid可以与后台数据库无缝对接,通过Ajax实现数据的动态加载。开发者可以通过配置列定义、行样式、操作按钮...
`EasyUI` 将 jQuery 的功能进一步扩展,提供了诸如窗口(window)、表格(datagrid)、下拉菜单(combobox)、树形控件(tree)等常见的 UI 组件。 在 `jquery-easyui-1.4.4` 压缩包中,我们通常会看到以下主要部分...
3. **EasyUI JavaScript文件**:这些文件封装了一系列的组件,如对话框(dialog)、表格(datagrid)、菜单(menu)、表单(form)等。每个组件都有其特定的功能和API,使得开发者可以轻松地集成到项目中。 4. **...
在实际应用中,使用jQuery EasyUI 1.5.3可以极大地提高前端开发效率,尤其是在需要快速构建管理后台或者企业级应用时。同时,其与jQuery的良好兼容性,使得已经熟悉jQuery的开发者能够迅速上手。通过深入理解和熟练...
1. **数据网格(Datagrid)**:是EasyUI中的一个重要组件,用于显示和操作表格数据。它支持分页、排序、过滤、编辑等功能,并且能够与后端数据库无缝对接,进行数据的增删改查操作。 2. **表单(Form)**:提供了...
- UI 组件:EasyUI 提供了大量的组件,如对话框(dialog)、表格(datagrid)、菜单(menu)和下拉树(combotree)等,这些组件具有丰富的功能和良好的用户体验。 2. **EasyUI 版本介绍** - 1.3.1 版本:这是一个...
例如,创建一个带有分页功能的表格,首先引入EasyUI的CSS和JS文件,然后定义HTML结构,通过jQuery选择器找到对应的元素并调用`datagrid`方法,设置相应的参数和数据源。同时,可以利用提供的事件处理函数,如`...
2. **DataGrid(数据网格)**:用于展示大量结构化数据,支持排序、筛选、分页等功能,常用于表格数据的管理。 3. **Form(表单)**:提供了一系列表单控件,如输入框、下拉列表、复选框等,方便数据输入和验证。 4....
例如,使用`$(selector).dialog({options})` 创建对话框,`$(selector).datagrid({options})` 创建表格,通过设置不同的参数和回调函数,可以定制各种复杂功能。 总结,jQuery EasyUI 1.5 版本是一个强大的前端开发...