jquery
定义公用对象
//easyui三级联动公用对象
function selec(urle,id,value){
var obj={
valueField: id, //数据库查询出来的id 或别名
textField: value, //数据库查询出来的字段 或别名
url:urle, //查询路径
method:'get' , //get请求
editable:false, //设置只能选择,不能自己编辑
};
return obj;
}
三级联动方法调用入口
//easyui三级(此处三层)联动入口,六个参数:路径,三个下拉框选择器(按顺序1,2,3级),id,字段名
function category(url, id_sel_one, id_sel_two, id_sel_there,id,value){
var object=selec(url+"0",id,value);
object.onSelect=function(rec){ //选择一级时,对象添加检测函数,进入二级操作,以此类推
$(id_sel_there).combobox('loadData', {}); //清除第三级的所有选项
$(id_sel_there).combobox("setText","-- 请选择 --"); //设置第三级别默认提示
var object_two=selec(url+rec.categid,id,value);
object_two.onSelect=function(rec){
var object_there=selec(url+rec.categid, id, value);
$(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;
}
清除状态
//下拉框改变清除之前状态
function clearsta(){
$("#category_there").combobox("setValue","");
$("#category_two").combobox("setValue","");
$("#category_one").combobox("setValue","");
$("#industry").combobox("setValue","");
$("#industry").combobox("setText","-- 选择行业 --");
$("#category_one").combobox("setText","-- 请选择 --");
$("#category_two").combobox("setText","-- 请选择 --");
$("#category_there").combobox("setText","-- 请选择 --");
}
实例:html
<div id="postpone" title="批量修改职位类别" class="easyui-dialog"
closed="true">
<table id="batchmovetype" >
<form id="industrymovetype" method="put">
<input id="jid" name="jobId" style="display: none" />
<tr class="selection">
<td>行业大类:</td>
<td>
<!-- 字段 textField,valueField 需与查询返回结果 字段 或 别名 一致-->
<select id="industry" style="height: 30px; width: 170px;"
class="easyui-combobox" name="industry" editable="false" >
<option selected>-- 选择行业 --</option>
</select>
</td>
</tr>
<tr class="selection">
<td>职业类别:</td>
<td><select id="category_one"
style="height: 30px; width: 170px;" editable="false" class="easyui-combobox"
name="categname"><option selected>-- 请选择 --</option></select></td>
</tr>
<tr class="selection">
<td></td>
<td><select id="category_two"
style="height: 30px; width: 170px;" editable="false" class="easyui-combobox"
name="categname" ><option selected>-- 请选择 --</option></select></td>
</tr>
<tr class="selection" id="category_last">
<td></td> <!-- editable=false 不可编辑 -->
<td><select id="category_there" editable="false"
style="height: 30px; width: 170px;" class="easyui-combobox"
name="categname"><option selected>-- 请选择 --</option></select></td>
</tr>
<tr class="submit">
<td></td>
<td><a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-ok" id="sub">确认</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-no"
onclick="javascript:$('#postpone').dialog('close')">取消</a></td>
</tr>
</form>
</table>
</div>
</div>
实例:css
#batchmovetype{
align: center;
margin:10px auto;
}
input,select {
padding-left:5px;
outline: none;
}
.easyui-dialog {
width: 360px;
height: 205px;
}
.selection{
margin: 7px 0;
font-weight: bold;
}
#sub{
background-color: orange;
margin: 0 20px 0 10px;
}
实例:js事件,模拟触发
clearsta();//设置提示文字
var arr = $("#mytable").datagrid("getSelections");
if (arr.length == 0) {
state();//下面写好的方法
} else {
var json=selections(arr);
$("#industry").combobox({
valueField:'id',
textField:'indusname',
eaitable:true,
url:'queryindustry',
method:'get'
});
category("category/","#category_one","#category_two","#category_there",'categid','categname');//行业三级联动初始化
$("#postpone").window("open"); //弹出窗口
$("#jid").val(json.jobId); //id赋值到隐藏框
}
实例:提交js
$("#sub").click(function(){//修改职位类别
var industry=$("#industry").combobox('getValue');
var category_id=getVel("#category_one","#category_two","#category_there");
var regex=/^\+?[1-9][0-9]*$/;
if(!regex.test(industry)){
industry=0;
}
if(!regex.test(category_id)){
category_id=0;
}
if(!(industry || category_id)){
return $.messager.alert("提示","<font color='orange' size='16px'>请选择后再提交</font>");
}
$.ajax({
url:'updPosiType/'+$("#jid").val(),
type:'put',
data:{
'industry':industry,
'category_id':category_id
},
success:function(data){
}