JQuery easyui datagrid 单元格编辑时,使用浮动的textarea文本框并进行数据校验

有两种方式实现,一种方式是在html中验证,一种方式是在js中进行验证

方式一:

<th data-options="filed:‘remark‘,width:200,editor:{type:‘textarea‘}">备注</th>

方式二:

<th data-options="filed:‘remark‘,width:200,editor:{type:‘textarea‘, options:{validType:‘maxLength[150]‘}}">备注</th>

// 长度校验
$.extend($.fn.validatebox.defaults.rules,{
	maxLength: {
  		validator: function(value, param){
  			if(value.length > param[0]){
  				return false;
  			}
  			return true;
  		},
  		message: "请输入的内容小于{0}个字符."
  	}
})
// 解决datagrid中单击修改单元格时,textarea会自动将datagrid表格行撑大的问题
$.extend($.fn.datagrid.defaults.editors,{
	textarea: {
		init: function(container, options){
			// var input = $("<textarea class='datagrid-editable-input' style='position:absolute; padding:0px; margin-top:-12px; height:120px; resize:none;' data-options=\"required:true,validType:'maxLength[10]'\"></textarea>").validatebox(options).appendTo(container);
			var input = $("<textarea class='datagrid-editable-input' style='position:absolute; padding:0px; margin-top:-12px; height:120px; resize:none;'></textarea>").validatebox(options).appendTo(container);
		  		return input;
		  },
		getValue: function(target){
		  	return $(target).val();
		},
		setValue: function(target, value){
			$(target).val(value);
		},
		resize: function(target, width){
			var input = $(target);
		   	if($.boxModel == true){
			   input.width(width - (input.outerWidth() - input.width()));
		   	}else{
			   input.width(width);
			}
		}
	}
});
时间: 2024-12-09 08:21:05

JQuery easyui datagrid 单元格编辑时,使用浮动的textarea文本框并进行数据校验的相关文章

easyui datagrid 单元格编辑 即见即所得,MVC菜单维护,扫描增加

效果如图: 参见 EasyUI 官方 Demo 及文档 @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="~/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script> <table id="datagrid" class

easyui datagrid 单元格编辑保存

要求分数和排序两列能编辑 //查询该试卷题型的试题 $('#allList1').datagrid({ url:app.approot+"paperRes/getPaperQuestionList/"+ptyid, handler:function(){ //接受改变的值 $('#allList1').datagrid('acceptChanges'); }, onBeforeEdit: function (rowIndex,rowData) { $("#selQuestio

easyui datagrid 单元格编辑 自动聚焦 、全选

$.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields')); for (var i = 0

DevExpress控件 DataGrid 单元格编辑 回车

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using CYSoft.UI.Common; using CYSoft.Common; using CYSoft.TS.Entit

Easyui datagrid 单元格格式化函数formatter的使用

$('#dg').datagrid({ columns:[[ {field:'userId',title:'User', width:80, formatter: function(value,row,index){ if (row.user){ return row.user.name; } else { return value; } } } ]] }); 以上是通过JS来进行调用 单元格格式化函数formatter带三个参数: value:单元格的字段值 rowData:该单元格所在行的行

获取wpf datagrid单元格编辑事件

DataGrid标签中加 <i:Interaction.Triggers> <i:EventTrigger EventName="CellEditEnding" > <i:InvokeCommandAction Command="{Binding CellEditEndingCommand}" CommandParameter="{Binding ElementName=DataGrid1}" /> </

jQuery EasyUI 将单元格改为链接 可点击

看图,点击之后可以直接访问 方法是 <th field="url" width="50" formatter="formatPrice" > 下载链接 </th> 有一个 formatter 属性, function formatPrice(val, row) { return '<a style="color:red;" href="' + val + '">点击下载'

jQuery easyuI datagrid 多行编辑

AlphaBlend实现透明效果,只是仅仅能针对某块区域进行alpha操作,透明度可设. TransparentBlt能够针对某种颜色进行透明,只是透明度不可设. AlphaBlend: BLENDFUNCTION bn; bn.AlphaFormat = 0; bn.BlendFlags = 0; bn.BlendOp = AC_SRC_OVER; bn.SourceConstantAlpha = 0; //透明度设置,0为不透明:255为全然透明 AlphaBlend(hMemDC,0,38

Easyui datagrid 设置内容超过单元格宽度时自动换行显示

datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下: 图1: 图2: 解决方法 定义表格时,设置nowrap属性为false. <table id='tt' class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height: