esayui常用操作(数据库加载复选框选中,调用百度地图、三级联动封装,编辑器,js正则等等)

常用图标库:
图标一般选用16*16规格的
iconfont.cn 阿里巴巴矢量图标库
esayicon.net ico图标库

easyui 单个下拉框初始化

//初始化单个下拉框
function initSelect(selector,ur){
	$(selector).combobox({
		valueField:'id',		//默认编号字段id, 查询时应将主键添加别名 id,否则无效
		textField:'text',	//默认内容字段 text, 查询时应将主键添加别名 text,否则无效
		eaitable:true,
		url:ur,
		method:'get'		//默认get请求
	});
}

easyui 三级联动公用对象

//easyui三级联动公用对象
	function selec(urle){	//url
		var obj={
			    valueField: 'id', //数据库查询出来的id别名
			    textField:'text', //数据库查询出来的字段别名
			    url:urle,		 //查询路径
			    method:'get' ,	 //get请求
			    editable:false,	 //设置只能选择,不能自己编辑
		    };
		return obj;
	}

easyui三级(此处三层)联动入口,四个参数分别是:路径,按大,中,小顺序传参

// 初始化职位分类 rest 风格传参,url需加 '/'
//调用方法	

	thereLinkage("category/","#jobType_one","#jobType_two","#jobType_there");


	function category(url, id_sel_one, id_sel_two, id_sel_there){
		var object=selec(url+"0");			//一级父节点一般为0,若为其他自行修改
		object.onSelect=function(rec){ 		//选择一级时,对象添加检测函数,进入二级操作,以此类推
			$(id_sel_there).combobox('loadData', {}); //一级改变后,清除第三级的所有选项,二级会自动重新加载
			$(id_sel_there).combobox("setText","--  请选择  --");  //设置第三级别默认提示
			
			var object_two=selec(url+rec.categid);
		    object_two.onSelect=function(rec){ 
		    	var object_there=selec(url+rec.categid);
		    	$(id_sel_there).combobox(object_there);
		    }
		    $(id_sel_two).combobox(object_two);
	   }
	   $(id_sel_one).combobox(object);
	}

easyui三级联动获取最底层值,参数:三级选择器,一,二,三级

function getVel(sel_one,sel_two,sel_there){
	var category_two=$(sel_two).combobox('getValue');
   	var category_id=$(sel_there).combobox('getValue');
   	if(!category_id){
   		category_id=category_two;
   	}else if(!category_two){
   		category_id=$(sel_one).combobox('getValue');
   	}
   	return category_id;
}

数据库结构

在这里插入图片描述

easyui 分页

var p = $('#mytable').datagrid("getPager");
	$(p).pagination({
		pageSize : 10, // 每页默认10条
		pageList : [ 5, 10, 20, 30, 40, 50 ], // 可选择的每页显示多少条
		beforePageText : '当前页  ', // 页面数字前的汉字提示
		afterPageText : ' 共 {pages}', // 总页数
		displayMsg : "当前{from} - {to} 条  共 {total} 条记录", // 当前1 - 10 条记录 共 21条
	});

js 正则表达式

1、正则表达式
 
/^\\d+$/  //非负整数(正整数 + 0)
/^[0-9]*[1-9][0-9]*$/  //正整数
/^((-\\d+)|(0+))$/  //非正整数(负整数 + 0)
/^-[0-9]*[1-9][0-9]*$/  //负整数
/^-?\\d+$/    //整数
/^\\d+(\\.\\d+)?$/  //非负浮点数(正浮点数 + 0)
/^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$/  //正浮点数
/^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$/  //非正浮点数(负浮点数 + 0)
/^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/  //负浮点数
/^(-?\\d+)(\\.\\d+)?$/  //浮点数
 
 
2、使用方法
  var r = /^\+?[1-9][0-9]*$/;  //正整数
  String str = "123";
  boolean flag=r.test(str);
  如果判断为正整数,则flag为true
 
3JS整数相加
 
  首先保证输入的都是数字
  nText1=parseFloat(document.all.text1.value);
  nText2=parseFloat(document.all.text2.value);
  nSum=nText1+nText2

百度地图调用

//网络地址,直接复制可用,无需下载文件
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iBM9rbzTH2dMZW7MbYMYmFgb"></script>
</head>
<body>
	
	<input id="address" type="text" class="text_in" name="pt_particular_loction"/>
	
<script>
	//value是要展示的具体位置
	function map(value){
		//百度地图展示
		var map = new BMap.Map("allmap");    // 创建Map实例
		map.centerAndZoom(value, 11);  // 初始化地图,设置中心点坐标和地图级别
		//添加地图类型控件
		map.addControl(new BMap.MapTypeControl({
			mapTypes:[
	            BMAP_NORMAL_MAP,
	            BMAP_HYBRID_MAP
	        ]}));
	        
		map.setCurrentCity(value);          // 设置地图显示的城市 此项是必须设置的
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	}
</script>
</body>

效果如下

在这里插入图片描述

文本域添加 编辑器


// 1. 简单文本域编辑器

<script type="text/javascript" src="/resource/kindeditor/kindeditor-all.js"></script>

<textarea name="pt_content" id="pt_content" style="height:200px;"></textarea>

var editor;
KindEditor.ready(function(K) {
	editor = K.create('textarea[name="pt_content"]', {
		resizeType : 1,
		allowPreviewEmoticons : false,
		allowImageUpload : false,
		width:'550px',
		items : [
			'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
			'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
			'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
		afterBlur: function(){this.sync();}
	});
});


// 2. 富功能编辑器
<head>
<script src="/resource/kindeditor/kindeditor.js"></script>
<script src="/resource/kindeditor/kindeditor-all.js"></script>
<script src="/resource/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/resource/kindeditor/lang/zh_CN.js"></script>
</head>
<body>
 <textarea rows="3" style="width: 400px;overflow:auto" id="subject_text"
	name="jobDesc" class="easyui-validatebox"
		data-options="required:true,validType:'length[1,1000000]'"
		invalidMessage="最大长度不能超过1000000">
</textarea> 
var editor;
	<script>	
	$(function() {
		  editor = KindEditor.create('textarea[name="subject_text"]',{
			  resizeType : 1,
			  width:"70%",
			  height:"130px",
			  afterChange:function(){
	          	this.sync();
	      	  },afterBlur:function(){
	    	  	this.sync();
	       }});
		}); 
	</script>	
</body>

css渐变色样式

#grad {
	line-height: 100px;
	width: 500px;color:green;
	font-size:18px;
	font-weight:bold;
	text-align:center;
 	background: linear-gradient(Red, orange, yellow,cyan,#9933FF,yellow,orange,Red);
  /* background: linear-gradient(red, blue);  渐变色标准的语法,效果如下,为菜鸟教程调试样式截图 
  网址:http://www.runoob.com/css3/css3-gradients.html*/
}

ajax 传参可以传数组,json,map,list等等


$.ajax({
dataType:"json",//	参数类型,data 默认支持数组、对象,可以直接传
	contentType:'application/json;charsetset=UTF-8',// 内容类型,设置后可以传map,
	//默认为application/x-www-form-urlencoded
	url:'updat',
	type:'put',
	data:{
		'jobList':row.jobId,
		'num':'4'
	},
	success:function(data){
		successdata(data);
	}
})

4.关于@ResquestBody:

接收的是一个Json对象的字符串,而不是一个Json对象

A)GET、POST方式提时, 根据request header Content-Type的值来判断:
application/x-www-form-urlencoded, 可选(即非必须,因为这种情况的数据@RequestParam, @ModelAttribute也可以处理,当然@RequestBody也能处理);
multipart/form-data, 不能处理(即使用@RequestBody不能处理这种格式的数据);
其他格式, 必须(其他格式包括application/json, application/xml等。这些格式的数据,必须使用@RequestBody来处理);
B) PUT方式提交时, 根据request header Content-Type的值来判断:
application/x-www-form-urlencoded, 必须;
multipart/form-data, 不能处理;
其他格式(其他格式包括application/json, application/xml等), 必须;
说明:request的body部分的数据编码格式由header部分的Content-Type指定;

故前台传递json数据时后台必须用@ResqustBody来处理,前台ajax必须指定contentType类型为
 "application/json;charset=UTF-8",默认为application/x-www-form-urlencoded

注!!!

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值