jQuery EasyUI 的editor组件使用

问题:最近在优化一个项目时，前端用到了 easyui这个插件来实现表格，搞了很久，才实现出一部分功能，但是还是有很多地方不熟悉，故记录一下，以后再研究

第一个实例------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script src="easyui/jquery-1.7.2.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js"></script>

</head>
<body>
<div id='grid-toolbar'>
<div class="criteria">
               <span>
                   <a type="btn-save" class="easyui-linkbutton btn-blue" iconCls="icon-save">全部保存</a>
               </span>
</div>
       </div>
<table id="result_grid" class="easyui-datagrid" style="width:410px;height:250px" ,fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">Code</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'price',width:100,align:'right'">Price</th>
<th data-options="field:'cc',width:100,align:'right',editor:{type:'text'}">可编辑</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>name1</td>
<td>2323</td>
<td>11</td>
</tr>
<tr>
<td>002</td>
<td>name2</td>
<td>4612</td>
<td>11</td>
</tr>
</tbody>
</table>
<script>
$('#result_grid').datagrid({
onClickRow: function(rowIndex, rowData) {

$("#result_grid").datagrid('selectRow', rowIndex);
$("#result_grid").datagrid('beginEdit', rowIndex); //设置可编辑状态

},
onBeforeEdit: function(index, row) {

editRow = row;
row.editing = true;

},
onAfterEdit: function(index, row, changes) {
$('#result_grid').datagrid('updateRow', {
index: index,
row: {
occupation: parseInt(row.occupation),
cause: row.cause
}
});
datagridMgr.addRow(row);
row.editing = false;
},
onCancelEdit: function(index, row) {
row.editing = false;
},
})

/**
       * 数据管理对象
       */
       var datagridMgr = {
           dataList:[],
           /**
           * 查询数据
           */
           queryData:function(){
               var name=$('input[name="username"]').val();
               var startTime=$('input[name="startTime"]').val();
               var endTime=$('input[name="endTime"]').val();

               $('#result_grid').datagrid('load',{
                   name: name,
                   startTime: startTime,
                   endTime:endTime
               });
           },
           addRow:function(row){
               this.dataList.push(row);
           },
           submitData:function(){
               var json=JSON.stringify(this.dataList);
           }
       }

       /**
       * 查询事件
       */
       $('a[type="btn-search"]').bind("click",function(){
           datagridMgr.queryData();
       });

       /**
       * 全部保存
       */
       $('a[type="btn-save"]').bind("click",function(){
           if(editRow){

               datagridMgr.dataList.length=0;
               var rows = $('#result_grid').datagrid("getSelections");
               for(var i=0;i<rows.length;i++){
               var index=$('#result_grid').datagrid('getRowIndex',rows[i]);
               $('#result_grid').datagrid("endEdit", index);
               }
               var data=$('#result_grid').datagrid('getData');
               $('#result_grid').datagrid('loadData',data);
               editRow=null;
               datagridMgr.submitData();

}else{
               $.messager.alert('温馨提示','没有行需要保存');
           }
       });
</script>
</body>
</html>

第二个实例:----------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="easyui/texteditor.css" />
<script src="easyui/jquery.min.js"></script>

<script src="easyui/jquery.easyui.min.js"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="easyui/jquery.texteditor.js"></script>

       <style>
           .criteria{
           margin-top: 10px;
           margin-bottom: 10px;
           }
           .criteria > span{
               display: inline-block;
               width: 20%;
           }

           .criteria label{
               margin: 0px 10px;
           }

           .criteria span a{
               margin: 0px 5px;
           }

       </style>
   </head>
   <body>
       <div id='grid-toolbar'>
           <div class="criteria">
               <span><label>名称:</label><input type="text" class="easyui-textbox" name="username" ></span>
               <span ><label>开始时间：</label><input type="text" class="easyui-datebox" name="startTime" id="startTime" data-options="editable:false"/></span>
               <span><label>结束时间：</label><input type="text" class="easyui-datebox" name="endTime" id="endTime" data-options="editable:false"/></span>
               <span>
                   <a type="btn-search" class="easyui-linkbutton btn-blue" iconCls="icon-search">查询</a>
                   <a type="btn-save" class="easyui-linkbutton btn-blue" iconCls="icon-save">全部保存</a>
               </span>
           </div>
       </div>
       <table id="result_grid"></table>
   </body>

   <script>
var editRow=null;
       $('#result_grid').datagrid({
           url:"new_file.json",
method: "get",
           fitColumns:true,//宽度自适应
height: 280,
rownumbers:true,
nowrap:true,
pagination:true,
pageNumber:1,
pageSize:10,
pageList:[10,20,30],
   onClickRow: function (rowIndex, rowData) {

   $("#result_grid").datagrid('selectRow', rowIndex);
   $("#result_grid").datagrid('beginEdit', rowIndex);//设置可编辑状态

   },
   onBeforeEdit:function(index,row){
       editRow=row;
               row.editing = true;

           },
           onAfterEdit:function(index, row, changes){
               $('#result_grid').datagrid('updateRow',{
                   index: index,
                   row: {
                       occupation: parseInt(row.occupation),
                       cause: row.cause
                   }
               });

datagridMgr.addRow(row);
               row.editing = false;

           },
           onCancelEdit:function(index,row){
               row.editing = false;

           },
       columns:[[

       {field: 'id', checkbox:true,width:60},
       {field:'name',title:'名字',width:150},
       {field:'age',title:'年龄',width:150},
       {field:'sex',title:'性别',width:150,formatter:function(value,row,index){
           var result='';
           switch(value){
               case 0:
               result='女';
               break;
           case 1:
           result='男';
           break;
           }
           return result;
       }},
       {field:'occupation',title:'职业(可编辑)',width:150,
       formatter:function(value,row,index){
           var result='';
           switch(parseInt(value)){
               case 1:
               result='教师';
               break;
           case 2:
           result='工程师';
           break;
           }
           return result;
       },
       editor : {
                   type : 'combobox',
                   options : {
                       editable:false,
                       valueField:'code',
                      textField:'text',
                      url:"file:///C:/Users/86155/Documents/HBuilderProjects/easyui/new_file.json"

                   }
               }

       },
       {field:'cause',title:'参赛原因(可编辑)',width:150,
       editor : {
                   type : 'text'
               }

       },
       {field:'creatTime',title:'报名时间',width:150}

       ]],
       toolbar: '#grid-toolbar'
       });

/**
       * 数据管理对象
       */
       var datagridMgr = {
           dataList:[],
           /**
           * 查询数据
           */
           queryData:function(){
               var name=$('input[name="username"]').val();
               var startTime=$('input[name="startTime"]').val();
               var endTime=$('input[name="endTime"]').val();

               $('#result_grid').datagrid('load',{
                   name: name,
                   startTime: startTime,
                   endTime:endTime
               });
           },
           addRow:function(row){
               this.dataList.push(row);
           },
           submitData:function(){
               var json=JSON.stringify(this.dataList);
               subimtJsonData(json);
           }
       }

       /**
       * 查询事件
       */
       $('a[type="btn-search"]').bind("click",function(){
           datagridMgr.queryData();
       });

       /**
       * 全部保存
       */
       $('a[type="btn-save"]').bind("click",function(){
           if(editRow){

               datagridMgr.dataList.length=0;
               var rows = $('#result_grid').datagrid("getSelections");
               for(var i=0;i<rows.length;i++){
               var index=$('#result_grid').datagrid('getRowIndex',rows[i]);
               $('#result_grid').datagrid("endEdit", index);
               }
               var data=$('#result_grid').datagrid('getData');
               $('#result_grid').datagrid('loadData',data);
               editRow=null;
               datagridMgr.submitData();

}else{
               $.messager.alert('温馨提示','没有行需要保存');
           }
       });

       /**
       * 提交数据
       * @param {Object} json
       */
       function subimtJsonData(json){
           $.ajax({

type: "POST",
url:"file:///C:/Users/86155/Documents/HBuilderProjects/easyui/new_file.json",

dataType: "json",

data: {data:json},

success: function (data) {
                       $.messager.alert('温馨提示',data.message);
}
});
       }



   </script>
</html>

new_file.json文件:

[{"id":1,"name":"张三","sex":1,"age":"13","cc":11},{"id":1,"name":"张三","sex":1,"age":"13","cc":11},{"id":1,"name":"张三","sex":1,"age":"13","cc":11}]

备注:jQuery EasyUI官网

https://www.runoob.com/jeasyui/ext-edatagrid.html

jQuery EasyUI 的editor组件使用的更多相关文章

JQuery EasyUI的常用组件
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...
[js]jQuery EasyUI的linkbutton组件disable方法无法禁用jQuery绑定事件的问题分析
问题由来 linkbutton 是 jQuery EasyUI 中常用的一个控件,可以使用它创建按钮.用法很简单,使用 a 标签给一个easyui-linkbutton 的class就可以了. < ...
jQuery EasyUI Datagrid VirtualScrollView视图简单分析
大家都知道EasyUI的Datagrid组件在加载大数据量时的优势并不是很明显,相对于其他一些框架,如果数据量达到几千,便会比较慢,特别是在IE下面.针对这种情况,我们首要做的是要相办法优化datag ...
jQuery EasyUI Datagrid性能优化专题
jQuery EasyUI的Datagrid组件功能算是很强大了,不过性能确实不怎么乐观,而对于性能问题,网络上几乎也找不到相关的优化资料,所谓的牛人们可能都望而却步了.本博客以后会带着分析Data ...
jQuery EasyUI Datagrid性能优化专题(转)
jQuery EasyUI的Datagrid组件功能算是很强大了,不过性能确实不怎么乐观,而对于性能问题,网络上几乎也找不到相关的优化资料,所谓的牛人们可能都望而却步了.本博客以后会带着分析Dat ...
第二百二十五节，jQuery EasyUI，PropertyGird(属性表格)组件
jQuery EasyUI,PropertyGird(属性表格)组件学习要点: 1.加载方式 2.属性列表 3.方法列表本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的 ...
第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件学习要点: 1.加载方式 2.分页功能本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
雷林鹏分享：jQuery EasyUI 数据网格 - 添加分页组件
jQuery EasyUI 数据网格 - 添加分页组件本实例演示如何从服务器端加载数据,如何添加分页组件(pagination)到数据网格(datagrid). 创建数据网格(DataGrid) 为 ...
求助关于jquery easyUI中的treegrid组件，请各位帮忙给个思路，谢谢啦
现在项目中用到jquery easyUI中的treegrid组件,已经可以正常显示了.但是在保存的时候遇到问题,页面上参照官网的例子可以在页面更新,但是怎么获取编辑后的数据进而保存到数据库呢?

随机推荐

C++函数参数的传递顺序
C++编译器默认使用的是 __cdecl 模式,参数是通过栈传递的,因此是从右到左的传参顺序. int f(int a, int b, int c) { return 0; } int main(){ ...
ret2dl_resolve
ret2dl_resolve是一种比较复杂的高级ROP技巧,利用它之前需要先了解动态链接的基本过程以及ELF文件中动态链接相关的结构. 我根据raycp师傅的文章,动手调试了一下: https://r ...
golang(gin框架)，基于RESTFUL的跨语言远程通信尝试
golang(gin框架),基于RESTFUL的跨语言远程通信尝试背景: 在今年的项目实训过程中,遇到了这样的问题: 企业老师讲课实用的技术栈是Java springboot. 实训实际给我们讲课以 ...
JavaWeb项目作业 Market商品管理系统
目录一.语言和环境二.实现功能三.数据库设计四.实现代码一.语言和环境实现语言:Java语言. 环境要求:MyEclipse(Eclipse)+MySQL. 实现方式:JBDC.jsp/s ...
django中写入数据时给密码加密
方法一.在自定义的form表单中重写save方法: 方法二.使用信号量来实现 1. 在应用的模块下新建signal.py文件 2.编写回调函数,内容如下: 3. 在应用的app.py文件中的ready ...
idea 创建 springboot 模块报错-解决
1.报错截图 2.解决把 https://start.spring.io 换成阿里镜像的即可 https://start.aliyun.com/
[ Flask ] myblog_flask问题集（RESTfull风格）
VUE问题前端VUE怎么捕获所有404NOT FOUND的路由呢? [ 解决方案 ] vue-router路由守卫,参考文档:动态路由匹配对于路由.../edit/<id>,自己能编辑 ...
springMVC+redis+redis自定义工具类的配置
1. maven项目,加入这一个依赖包即可, <dependency> <groupId>redis.clients</groupId> <artifactI ...
spring boot热部署 -- 实现后端java热更新 -- 详细操作【idea 的 JRebel破解】
1.前言上一随笔写了如何使得spring boot热更新前端 ,但后端java部分无法热更新. 对于Java热更新,以前常使用 springloaded ,但是缺点和bug很多无法实现真正意 ...
spring boot --- 使用注解读取 properties 文件信息
1.前言以前使用spring MVC框架 ,读取properties 配置文件需要写一大堆东西 ,也许那时候不怎么使用注解 ,现在使用spring boot ,发现了非常简便的办法---使用注解 ...

jQuery EasyUI 的editor组件使用

jQuery EasyUI 的editor组件使用的更多相关文章

随机推荐

热门专题