easyUI datagrid editor扩展dialog
easyUI datagrid简单使用：着重两点1、editor对象的click事件；2、将dialog窗体内的值填写到当前正编辑的单元格内
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/easyui.css" rel="stylesheet" />
<link href="css/icon.css" rel="stylesheet" />
<link href="css/demo.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easyui.min.js"></script>
</head>
<body>
<!--datagrid-->
<table id="dg"></table>
<!--dialog-->
<div id="dd">
<input type="text" id="txt" />
</div>
<script type="text/javascript">
var columns = [[
{ field: 'A', title: 'A', width: 100, rowspan: 2 },
{ title: 'B', colspan: 3 },
{ title: 'C', colspan: 3 }
], [
{
field: 'a', title: 'a', width: 100, editor: {
type: 'textbox',
options: {
required: true,
missingMessage: '*必填*'
}
}
},
{
field: 'b', title: 'b', width: 100, editor: {
type: 'datebox'
}
},
{
field: 'c', title: 'c', width: 100, editor: {
type: 'combobox',
options: {
data: [{ value: 'cc', text: 'cc' }, { value: 'ccc', text: 'ccc' }],
panelHeight: 'auto'
}
}
},
{
field: 'd', title: 'd', width: 100, editor: {
type: 'numberbox',
options: { precision: 1 }
}
},
{ field: 'e', title: 'e', width: 100, editor: { type: 'checkbox', options: { on: '1', off: '0' } } },
{
field: 'f', title: 'f', width: 100, editor: {
type: 'dialog',
options: {
dlgId: 'dd',
textId: 'txt',
currField: 'f'
}
}
}
]];
var data = [{ A: 'A', a: 'a', b: 'b', c: 'c', d: 'd', e: 'e', f: 'f' }];
$(function () {
//初始化弹窗
$('#dd').dialog({
title: '弹窗',
width: 400,
height: 'auto',
closed: true,
cache: false,
modal: true,
buttons: [{
text: '保存',
handler: function () {
var index = editIndex;
var cellEditor = $('#dg').datagrid('getEditor', { index: index, field: editField });
cellEditor.actions.setValue(cellEditor.target, $('#txt').val());
$('#dd').dialog('close');
}
}, {
text: '取消',
handler: function () {
$('#dd').dialog('close');
}
}]
});
//初始化表格
$('#dg').datagrid({
data: data,
title: '对账报告- PA02',
iconCls: 'icon-title',
width: 650,
height: 'auto',
singleSelect: true,
fitColumns: false,
columns: columns,
rownumbers: true,
showFooter: true,
pagination: true,//分页控件
fit: true,//自动大小
border: true,
onLoadSuccess: onLoadSuccess,
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function () {
editCell = false;
if ($('#dg').datagrid('validateRow', editIndex)) {
$('#dg').datagrid('endEdit', editIndex);
$('#dg').datagrid('appendRow', {});
$('#dg').datagrid('selectRow', editIndex + 1).datagrid('beginEdit', editIndex + 1);
editIndex = editIndex + 1;
}
}
}]
});
//设置分页控件
var p = $('#dg').datagrid('getPager');
$(p).pagination({
pageSize: 10,//每页显示的记录条数，默认为10
pageList: [5, 10, 15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
showRefresh: false,
afterPageText: '页 共 {pages} 页',
displayMsg: '<span style="font-size:20px;font-weight:700"></span>当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
});
var editIndex = -1;//标识编辑行
var editField;//正在编辑的单元格所属字段
function onLoadSuccess() {
editIndex = $('#dg').datagrid('getRows').length - 1;
}
//重写editor,添加弹出框类型
$.extend($.fn.datagrid.defaults.editors, {
dialog: {
init: function (container, options) {
var editor = $('<input type="text"/>').appendTo(container);
editor.textbox(options);
container.click(function () {
$('#' + options['dlgId']).dialog('open');
editField = options['currField'];
});
return editor;
},
getValue: function (target) {
return $(target).textbox('getValue', $(target).val());
},
setValue: function (target, value) {
if (value)
$(target).textbox('setValue', value);
else
$(target).textbox('setValue', '');
},
resize: function (target, width) {
$(target).textbox('resize', width);
},
destroy: function (target) {
$(target).textbox('destroy');
}
}
});
</script>
</body>
</html>
easyUI datagrid
页码导航栏pagination，在此处代码中与datagrid分开初始化，自定义了pagination，会导致初始页面加载两次，其原因是第一次表格加载取得总记录数total，和页码栏total值不相等，那么easyui会重新发一次请求，解决办法是可以注释掉源码中再次请求的代码
1097//if(_b3.total==0){
1098//_b3.pageNumber=0;
1099//_b4=0;
1100//}
但是还有解决办法，注释掉下面代码，没有测试呢
if(_615.total!=data.total){
_614.pagination("refresh",{total:data.total});
if(opts.pageNumber!=_615.pageNumber){
opts.pageNumber=_615.pageNumber;
_5d7(_60f);
}
}
easyUI datagrid editor扩展dialog的更多相关文章
- 关于EasyUI datagrid editor combogrid搜索框的实现
首先需要datagrid editor对combogrid的扩展,这个是别人实现的: $.extend($.fn.datagrid.defaults.editors, { combogrid: { i ...
- easyui datagrid editor checkbox 单击事件
Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', ...
- jquery EasyUI datagrid 的扩展
接触 easyui 半年,js学的不深.大神请路过. 直接扩展 添加方法: $.extend($.fn.datagrid.methods, { getSelectedIndex: function ( ...
- easyui datagrid plunges 扩展 插件
项目使用 springmvc4.x spring4.x hibernate4.x easyui 为了便于开发,扩展了easyui 的 datagrid 功能,下面直接贴上扩展代码: /** * ...
- 关于EasyUI datagrid 无法在dialog中显示的问题分析及解决方案！
最近项目中引用了easyUI,很大程度上的简化了开发过程,但是随之而来的也遇到一些问题,比如:标题中遇到的问题,去网上搜罗了下关于这个问题的解决方案,不是说的很复杂就是干脆文不对题,国外的使用这种稍微 ...
- Easyui datagrid editor为combobox时指定数据源
当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,我在引入combobox时对数据源这快做个总结,在做demo的过程中遇到个问题,就是当你选择了下拉框的值后点击保存, ...
- easyUI datagrid view扩展
//扩展easyuidatagrid无数据时显示界面 var emptyView = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender ...
- easyui datagrid editor combobox添加空选则清空combobox框
<script type='text/javascript'> var editIndex = undefined; $(function() { $('#tb1').datagrid({ ...
- easyui datagrid editor onBeforeEdit事件下使用getEditor和getEditors失效
我在使用onClickRow: function(rowIndex,rowData){ if(editRow!=-1){ ...
随机推荐
- C# Task 用法
C# Task 的用法 其实Task跟线程池ThreadPool的功能类似,不过写起来更为简单,直观.代码更简洁了,使用Task来进行操作.可以跟线程一样可以轻松的对执行的方法进行控制. 顺便提一下, ...
- Beta--项目冲刺第七天
胜利在望-- 队伍:F4 成员:031302301 毕容甲 031302302 蔡逸轩 031302430 肖阳 031302418 黄彦宁 会议内容: 1.站立式会议照片: 2.项目燃尽图 3.冲刺 ...
- Android下常见的四种对话框
摘要:在实际开发过程有时为了能够和用户进行很好的交互,需要使用到对话框,在Android中常用的对话框有四种:普通对话框.单选对话框.多选对话框.进度对话框. 一.普度对话框 public void ...
- 01python算法--算法和数据结构是什么鬼？
我不想直接拷贝google 上面所有对算法的解释.所以我想怎么说就怎么说了,QAQ 1:什么是程序? 解决问题的范式 2:什么是问题? 程序输入与输出之间的联系 3:什么是算法: 算法就是解决问题的思 ...
- java-汉字转化拼音(纯java)
1.转换所有的拼音 import java.util.Iterator; import java.util.LinkedHashMap; import java.util.Set; public cl ...
- C#-面向对象的三大特性——多态（虚方法与重写、抽象类、接口）
多态 同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果.在运行时,可以通过指向基类的指针,来调用实现派生类中的方法. 编译时的多态性:编译时的多态性是通过重载来实现的.对于非虚的成员来说 ...
- selenium3各种报错解决办法
解决办法全在这个链接里 http://learn-automation.com/use-firefox-selenium-using-geckodriver-selenium-3
- 如何在linux Shell脚本里面把一个数组传递到awk内部进行处理
前段时间和几位同事讨论过一个问题:Shell脚本里面怎样把一个数组传递到awk内部进行处理? 当时没有找到方法.前两天在QQ群里讨论awk的时候,无意间又聊起这个话题.机缘巧合之下找到一个思路,特此分 ...
- composer更新不成功，启用国内镜像网站的配置更改办法
通过 composer config -l -g 命令可以列出 composer 的全局配置信息 [home] 配置项就是 composer 的主目录 修改config.json { "co ...
- iOS二维码扫描IOS7系统实现
扫描相关类 二维码扫描需要获取摄像头并读取照片信息,因此我们需要导入系统的AVFoundation框架,创建视频会话.我们需要用到一下几个类: AVCaptureSession 会话对象.此类作为硬件 ...