easyUI那些事

接触到easyUI是从工作开始,最常用的是datagrid和input框的各种“变形”。下面总结一下这俩种用法

1.input框的“变形”

常用的input框的class有easyui-my97(时间)、easyui-validatebox(输入框)、easyui-combobox(下拉框):

  (1)easyui-my97

//easyui-my97

其中data-options中用于约束日期格式、是否必填等。

  • my97动态检验
$('#jzsj').my97({required: true,disabled:false});

  (2)easyui-validatebox

  • 输入框动态校验
//启用必填
$('#contaWay').validatebox({required:true,missingMessage:'该输入项为必输项'});
$('#contaWay').attr('disabled',false);
//取消必填并清空,禁用
$('#contaWay').validatebox({required:false});
$('#contaWay').val('');
$('#contaWay').attr('disabled',true);
  •  单选/多选校验

html 


 js

$(function(){
    //自定义单选多选以及不校验方法
    $.extend($.fn.validatebox.defaults.rules, {
		 radio: {
		  validator: function () {
		   var _form = $(this).parents("form");
		   var _input = _form.find("input[name='"+this.name+"']");
		   for(var i=0;i<_input.length;i++){
		    if(_input[i].checked) {
		              return true;
		          }
		   }
		     return false;
		        },
		        message: '请选择一项!'
		 },
		 noCheak: {
			  validator: function () {
				  return true;
			  },
			        message: '请选择一项!'
			 },
		checkbox:{
			validator: function () {
				debugger;
				var _form = $(this).parents("form");
				var _input = _form.find("input[name='"+this.name+"']");
				for(var i=0;i<_input.length;i++){
				if(_input[i].checked) {
				          return true;
				      }
				}
				return false;
			},
			message: '请至少选择一项!'
		}
	})
}

(3)easyui-combobox

2.datagrid数据列表

先放一个案例,datagrid的属性和方法有很多,当然功能也很强大,其实遇到问题查API是最好的方法。

dg=	$("#dg").datagrid({
		method:'get',
		url:'infectioncardJDJson',
		queryParams:obj,
		
		singleSelect : true,
		frozenColumns:[[
			{field:'ckx',checkbox : true},
			{field:'patientName',title:'患者姓名',width:150,align : 'center'},
		]],
		columns:[[
			
				{
					field:'cardId',
					title:'卡片id'
					
				},{
					field:'nmTag',
					title:'报告方式'
				}, {
					field : 'cardCode',
					title : '卡片编号',
					width : 200,
					
					align : 'center'
				}, {
					field : 'nmCardType',
					title : '报卡类型',
					width : 150,
					
					align : 'center'
				},  {
					field : 'nmCasetype',
					title : '病例分类',
					width : 150,
					
					align : 'center'
				}, {
					field : 'nmGroupId',
					title : '人员职别',
					width : 150,
					
					align : 'center'
				}, {
					field : 'nmSpecialGroup',
					title : '特殊职业',
					width : 150,
					
					align : 'center'
				}, {
					field : 'nmSex',
					title : '性别',
					width : 150,
					align : 'center',
				},{
					field:'intime',
					title:'录入时间'
				}
			
		]],
		onLoadSuccess:function(){
			//改变某一行的某个数据
			$(this).datagrid('updateRow',{
				index:1,
				row:{cardId:'hhh'}
			})
			//追加一行
			$(this).datagrid('appendRow',{
				patientName:'测试',
				cardId:'123',
				nmTag:'初次报告',
				nmSex:'男'
			})
			
		}
		
	})

其中常用属性与方法有:

easyUI那些事_第1张图片

easyUI那些事_第2张图片

你可能感兴趣的:(easyUI)