`

EasyUI 设置DataGrid 内文本框换行,可编辑

 
阅读更多
function getServiceState() {
	$('#datagrid').datagrid({
		url: $.navinfo.contextPath + '/MonitorSysAction.do?method=getHttpState',
		striped: true,
		collapsible: true,
		remoteSort: false,
		fit: true,
		fitColumns: true,
		singleSelect: true,
		pageNumber: 1,
		nowrap:false,
		pageSize: 10,
		pagination: false,
		columns : [ [  {
			field : 'serviceName',
			title : '服务接口名称',
			width : 10,
			align:'left',
			formatter : function(value, row, index) {
				return row.serviceName;
			}
		}, {
			field : 'serviceState',
			title : '服务接口状态',
			width : 10,
			align:'left',
			editor: {
                type: 'validatebox',
                	options: { required: true } 
            },
			formatter : function(value, row, index) {
				if(row.serviceState == 200){
					return row.serviceState;
				}else{
					return  "<div style=\"width: 560px;margin:0 auto;border:red 0px solid;display:block;word-break: break-all;word-wrap: break-word;color:red \">"+row.serviceState+"</div>";
				}
				
			}
		}
		] ],
		rownumbers: true,
		onLoadSuccess: function(data){
			
		}/*,onDblClickRow: function (rowIndex,rowData) {
            //alert("出发双击事件");
			$("#datagrid").datagrid("beginEdit", rowIndex);
	        //$("#datagrid").datagrid('endEdit',rowIndex);
	        //$("#datagrid").datagrid('beginEdit',rowIndex);
	        //$('#datagrid').datagrid('selectRow',rowIndex);
        }*/
	});
}

 

分享到:
评论

相关推荐

    easyui datagrid editor回车切换单元格示例,可参考

    easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。

    EasyUI可扩展Editable DataGrid(可编辑数据表格)

    标题 "EasyUI可扩展Editable DataGrid(可编辑数据表格)" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架,它提供了一系列预定义的CSS样式和...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    easyui的datagrid中editor和combobox的级联

    ### easyui的datagrid中editor和combobox的级联 在前端开发中,easyui是一个非常实用的库,它提供了一套完整的用户界面组件,能够帮助开发者快速构建出功能丰富的Web应用。其中,`datagrid`是easyui提供的一个重要...

    easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid在编辑状态下更新列的值

    在标题“easyui datagrid在编辑状态下更新列的值”中,我们关注的是如何在Datagrid的编辑模式下动态地修改列的值,以及确保在编辑结束后,保存的数据反映这些变更。以下将详细介绍这一过程。 首先,EasyUI的...

    easyui-datagrid可编辑可过滤的DEMO

    本文将深入探讨“easyui-datagrid可编辑可过滤的DEMO”,这是一个结合了EasyUI DataGrid组件的编辑和过滤功能的示例项目。 首先,DataGrid是EasyUI中的一个核心组件,它是一个数据展示表格,可以处理大量的数据并...

    Easyui-DataGrid表头拖动效果

    UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865

    easyui 可编辑datagrid完整例子,支持filebox

    在“可编辑 datagrid 完整例子”中,EasyUI 的 datagrid 组件被用作数据展示和编辑的核心。此例子特别强调了对 filebox 的支持,filebox 是 EasyUI 的一个扩展,用于处理文件上传功能。 在标题和描述中提到的“可...

    easyui的datagrid生成合并行,合计计算价格

    在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释: 1. EasyUI DataGrid组件: EasyUI的...

    EasyUI的DataGrid显示ASP.NET内容

    在客户端,使用jQuery和EasyUI配置DataGrid,设置URL以获取服务器端数据,并定义列显示: ```javascript $(function () { $('#dataGrid1').datagrid({ url: 'YourASPNETPage.aspx?page=1', // 调用ASP.NET页面...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...

    easyui的datagrid中editor和combogrid的结合使用

    对于需要动态编辑表格数据的应用场景,可以通过设置datagrid中的`editor`属性来实现单元格级别的编辑功能。 #### 二、combogrid组件介绍 在easyUI中,`combogrid`是一个结合了`combobox`和`grid`特性的组件,它...

    easyui-datagrid之间拖拽效果demo

    7. **EasyUI 配置和样式**:为了使拖放效果与 Datagrid 的样式融合,可能需要调整 EasyUI 的默认配置和 CSS 样式,如设置拖动元素的透明度、边界等。 通过以上步骤,我们可以创建一个既美观又实用的前端应用,用户...

    Spring Boot 系列教程 EasyUI-datagrid

    **Spring Boot 系列教程 EasyUI-datagrid** 在IT领域,Spring Boot是一个极其流行的Java框架,它简化了基于Spring的应用程序开发,通过自动配置和起步依赖使得开发者可以快速上手。EasyUI则是一个轻量级的前端框架...

    easyui的datagrid的数据渲染

    easyui的datagrid的数据渲染

    jquery.easyui.datagrid扩展合并列

    jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);

    jquery easyui datagrid demo

    Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件,常用于表格数据的展示和操作,支持分页、排序、过滤、编辑等功能。通过阅读这份文档,我们可以了解 Datagrid 的基本配置和高级特性,以及如何与后端数据源进行...

Global site tag (gtag.js) - Google Analytics