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组件,已经可以正常显示了.但是在保存的时候遇到问题,页面上参照官网的例子可以在页面更新,但是怎么获取编辑后的数据进而保存到数据库呢?
随机推荐
- TSS任务状态段
TSS (任务状态段)的作用及结构 1.什么是TSS TSS全称Task State Segment ,是操作系统在进行进程切换时保存进程现场信息的段 2.TSS什么时候用,有什么用 TSS在任务 ...
- JSON.parse 和 JSON.stringify 详解
JSON格式,(简写JavaScript Object Notation),是一种用于数据交换的文本格式,书写简单. 基于JavaScript原生语法,能够序列化对象.数组.数值.字符串.布尔值和 n ...
- HTML5 纯CSS3实现div按照顺序出入效果
效果: 源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- Zabbix 代码执行漏洞复现 /zabbix-cve_2017_2824
环境: 利用docker将vulfocus环境pull到本地搭建 漏洞描述: Zabbix 是由Alexei Vladishev 开发的一种网络监视.管理系统,基于 Server-Client 架构. ...
- Drools的Eclipse_IDEA插件安装
1.说明 Drools使用时不是必须依赖插件的, 只是在安装了相应的插件之后, 在开发工具中能识别到对应的drools文件, 能够进行一些智能提示. 以及使用插件提供的便捷功能. 2.Eclipse插 ...
- AWS修改RDS时区
查看 RDS 当前时区 默认情况下,AWS 的 RDS 采用的是 UTC 时间.而我们地区一般位于东八区,因此我们本地的时间是 UTC+8. 连接到 RDS 上,查询当前实例的时区. show var ...
- 初识python： 面向对象是个啥？
编程范式:编程是程序员用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程 ,一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马,实现一个任务的方式有很多 ...
- [ vue ] 监听v-model数据的变化，只要有变化就改变vuex的state值
场景描述: 1. 注册弹出框是用 v-model 绑定数据 showRegisterModal 实现的,点击遮罩层框架会把 showRegisterModal=false 2.REGISTER按 ...
- SQL Server数据库出现“无法访问数据库XXX(objectExplorer)”的解决办法
数据库版本为2008R2,服务器异常重启并重新挂载iscsi后,数据库出现"无法访问数据库XXX(objectExplorer)"问题. 输入SQL命令查看数据库状态 1 sele ...
- .net core 和 WPF 开发升讯威在线客服系统：调用百度翻译接口实现实时自动翻译
业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程. 我把这款业余时间写的小系统丢在网上,陆续有人找我要私有化版本,我都给了,毕竟软件业的初衷就是免 ...