>

jQuery使用EasyUi达成三级联合浮动下拉框效果

- 编辑:乐百家599手机首页 -

jQuery使用EasyUi达成三级联合浮动下拉框效果

// 一层Combo 
var srmCombx = $("#txtShouName")combobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id=' selectSgId '', 
dataType: 'json', 
success: function(data){ 
dataunshift({equipmentid:'',equipmentname:'全部'}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  onSelect:function(record){ //onSelect 用户点击时触发的事件 在此的意义在于,用户点击一级后自动二级combobox 
  piperowCombxcombobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id=' $("#txtShouName")combobox("getValue") '', 
dataType: 'json', 
success: function(data){ 
dataunshift({equipmentid:'',equipmentname:'全部'}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  onSelect:function(record){ //这里也使用了onSelect事件,在二级combobox被用户点击时触发三级combobox 
  pipeCombxcombobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id=' $("#txtPipeRowName")combobox("getValue") '', 
dataType: 'json', 
success: function(data){ 
dataunshift({equipmentid:'',equipmentname:'全部'}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
}); 
  }, 
  onLoadSuccess:function(){ //清空三级下拉框 就是成功加载完触发的事件 当一级combobox改变时,二级和三级就需要清空 
  pipeCombxcombobox("clear"); 
  pipeCombxcombobox('setValue', '全部'); //给combobox下拉框设置一个值,否则为空不好看 
  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
})combobox("clear"); //清空二级下拉框 

  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
}); 
/*******************************/ 
//下面的俩个是组件, 

// 二层Combo 
var piperowCombx = $("#txtPipeRowName")combobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id=' $("#txtShouName")combobox("getValue") '', 
dataType: 'json', 
success: function(data){ 
dataunshift({equipmentid:'',equipmentname:'全部'}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
}); 

//三层Combo 
var pipeCombx=$("#txtPipeName")combobox({ 
loader:function(param,success,error){ 
  $ajax({ 
url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id=' $("#txtPipeRowName")combobox("getValue") '', 
dataType: 'json', 
success: function(data){ 
dataunshift({equipmentid:'',equipmentname:'全部'}); 
success(data); 
}, 
        error: function(){ 
errorapply(this, arguments); 
} 
}); 
  }, 
  valueField: 'equipmentid',   
  textField: 'equipmentname', 
  value:'', 
  editable:false 
});

easyui下拉框动态级联加载的示范代码,easyui示例代码

乐百家前段 ,easyui的下拉框动态加载数据,大学中要依靠首先查询全部高校,然后依照高校动态加载课程。下边看怎么达成。

1.分界面效益

乐百家前段 1

  1. html js代码

    大学名称: 课程名称:

    $(function() {

    // 下拉框选择控件,下拉框的内容是动态查询数据库信息 
    $('#collegeName').combobox({  
        url:'${pageContext.request.contextPath}/loadInstitution',  
        editable:false, //不可编辑状态 
        cache: false, 
        panelHeight: '150', 
        valueField:'id',   
        textField:'institutionName', 
    
     onHidePanel: function(){ 
       $("#courseName").combobox("setValue",'');//清空课程 
       var id = $('#collegeName').combobox('getValue');     
       //alert(id); 
    
      $.ajax({ 
       type: "POST", 
       url: '${pageContext.request.contextPath}/loadCourse?id='   id, 
       cache: false, 
       dataType : "json", 
       success: function(data){ 
       $("#courseName").combobox("loadData",data); 
            } 
         });    
        } 
    

    });

    $('#courseName').combobox({  
      //url:'itemManage!categorytbl',  
      editable:false, //不可编辑状态 
      cache: false, 
      panelHeight: '150',//自动高度适合 
      valueField:'id',   
      textField:'courseName' 
      }); 
    

    });

3.后台代码

@RequestMapping("/loadInstitution") 
  /** 
   * 加载学院 
   * @param  
   * @param  
   * @return void 
   * @exception/throws [违例类型] [违例说明] 
   * @see     [类、类#方法、类#成员] 
   * @deprecated 
   */ 
  public void loadInstitute(HttpServletRequest request, 
      HttpServletResponse response) throws Exception { 
    try { 
      JackJsonUtils JackJsonUtils = new JackJsonUtils(); 
      List<Institution> institutionList = institutionBean 
          .queryAllColleage(); 
      System.out.println("学院list大小====="   institutionList.size()); 
      String result = JackJsonUtils.BeanToJson(institutionList); 
      System.out.println(result); 
      JsonUtils.outJson(response, result); 
    } catch (Exception e) { 
      logger.error("加载学院失败", e); 
    } 
  } 

  @RequestMapping("/loadCourse") 
  /** 
   * 动态加载课程 
   * 
   * 
   * @param  
   * @param  
   * @return void 
   * @exception/throws [违例类型] [违例说明] 
   * @see     [类、类#方法、类#成员] 
   * @deprecated 
   */ 
  public void loadCourse(HttpServletRequest request, 
      HttpServletResponse response) throws Exception { 
    JackJsonUtils JackJsonUtils = new JackJsonUtils(); 
    String id = request.getParameter("id"); 
    System.out.println("学院id===="   id); 
    try { 
      if(id != null && id != ""){ 
        List<CourseInfo> listCourseInfoList = courseBean 
            .queryAllCourseInfos(id); 
        System.out.println("课程list大小====="   listCourseInfoList.size()); 
        String result = JackJsonUtils.BeanToJson(listCourseInfoList); 
        System.out.println(result); 
        JsonUtils.outJson(response, result); 
      } 
    } catch (Exception e) { 
      logger.error("加载课程失败", e); 
    } 
  } 

根据基础提供的接口查询大学和科目,转变为json格式后绑定到前台控件上。

上述正是本文的全体内容,希望对我们的学习抱有协助,也盼望大家多多协理帮客之家。

easyui的下拉框动态加载数据,高校中要基于首先查询全数高校,然后根据大学动态加载...

jQuery EasyUI常用数据印证汇总,jqueryeasyui

easyui 的validatebox()提供了自定义表达的法子,为此作者把一部分常用的多寡印证汇总了一下,代码如下

$.extend($.fn.validatebox.defaults.rules, {
 CHS: {
  validator: function (value, param) {
   return /^[u0391-uFFE5] $/.test(value);
  },
  message: '请输入汉字'
 },
 ZIP: {
  validator: function (value, param) {
   return /^[1-9]d{5}$/.test(value);
  },
  message: '邮政编码不存在'
 },
 QQ: {
  validator: function (value, param) {
   return /^[1-9]d{4,10}$/.test(value);
  },
  message: 'QQ号码不正确'
 },
 mobile: {
  validator: function (value, param) {
   return /^(((d{2,3}))|(d{3}-))?13d{9}$/.test(value);
  },
  message: '手机号码不正确'
 },
 loginName: {
  validator: function (value, param) {
   return /^[u0391-uFFE5w] $/.test(value);
  },
  message: '登录名称只允许汉字、英文字母、数字及下划线。'
 },
 safepass: {
  validator: function (value, param) {
   return safePassword(value);
  },
  message: '密码由字母和数字组成,至少6位'
 },
 equalTo: {
  validator: function (value, param) {
   return value == $(param[0]).val();
  },
  message: '两次输入的字符不一至'
 },
 number: {
  validator: function (value, param) {
   return /^d $/.test(value);
  },
  message: '请输入数字'
 },
 idcard: {
  validator: function (value, param) {
   return idCard(value);
  },
  message:'请输入正确的身份证号码'
 }
});

/* 密码由字母和数字组成,至少6位 */
var safePassword = function (value) {
 return !(/^(([A-Z]*|[a-z]*|d*|[-_[email protected]#$%^&*.()[]{}<>?\/'"]*)|.{0,5})$|s/.test(value));
}

var idCard = function (value) {
 if (value.length == 18 && 18 != value.length) return false;
 var number = value.toLowerCase();
 var d, sum = 0, v = '10x98765432', w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], a = '11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91';
 var re = number.match(/^(d{2})d{4}(((d{2})(d{2})(d{2})(d{3}))|((d{4})(d{2})(d{2})(d{3}[xd])))$/);
 if (re == null || a.indexOf(re[1]) < 0) return false;
 if (re[2].length == 9) {
  number = number.substr(0, 6)   '19'   number.substr(6);
  d = ['19'   re[4], re[5], re[6]].join('-');
 } else d = [re[9], re[10], re[11]].join('-');
 if (!isDateTime.call(d, 'yyyy-MM-dd')) return false;
 for (var i = 0; i < 17; i  ) sum  = number.charAt(i) * w[i];
 return (re[2].length == 9 || number.charAt(17) == v.charAt(sum % 11));
}

var isDateTime = function (format, reObj) {
 format = format || 'yyyy-MM-dd';
 var input = this, o = {}, d = new Date();
 var f1 = format.split(/[^a-z] /gi), f2 = input.split(/D /g), f3 = format.split(/[a-z] /gi), f4 = input.split(/d /g);
 var len = f1.length, len1 = f3.length;
 if (len != f2.length || len1 != f4.length) return false;
 for (var i = 0; i < len1; i  ) if (f3[i] != f4[i]) return false;
 for (var i = 0; i < len; i  ) o[f1[i]] = f2[i];
 o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);
 o.MM = s(o.MM, o.M, d.getMonth()   1, 12);
 o.dd = s(o.dd, o.d, d.getDate(), 31);
 o.hh = s(o.hh, o.h, d.getHours(), 24);
 o.mm = s(o.mm, o.m, d.getMinutes());
 o.ss = s(o.ss, o.s, d.getSeconds());
 o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);
 if (o.yyyy   o.MM   o.dd   o.hh   o.mm   o.ss   o.ms < 0) return false;
 if (o.yyyy < 100) o.yyyy  = (o.yyyy > 30 ? 1900 : 2000);
 d = new Date(o.yyyy, o.MM - 1, o.dd, o.hh, o.mm, o.ss, o.ms);
 var reVal = d.getFullYear() == o.yyyy && d.getMonth()   1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;
 return reVal && reObj ? d : reVal;
 function s(s1, s2, s3, s4, s5) {
  s4 = s4 || 60, s5 = s5 || 2;
  var reVal = s3;
  if (s1 != undefined && s1 != '' || !isNaN(s1)) reVal = s1 * 1;
  if (s2 != undefined && s2 != '' && !isNaN(s2)) reVal = s2 * 1;
  return (reVal == s1 && s1.length != s5 || reVal > s4) ? -10000 : reVal;
 }
}; 

页面中要引进jquery.js 和 easyui.min.js 

html 代码中运用如下

<table class="grid" id="uiform">
<tr><td>登录名:</td><td><input required="true" id="txtUsername" type="text" class="txt03" /></td><td>真实姓名:</td><td><input id="txtTruename" validType="CHS" required="true" type="text" class="txt03" /></td></tr>
<tr><td>登录密码:</td><td><input validType="safepass" required="true" id="txtPassword" name="password" type="password" class="txt03" /></td><td>Email:</td><td><input id="txtEmail" name="email" validType="email" type="text" class="txt03" /></td></tr>
<tr><td>身份证号:</td><td><input validType="idcard" id="txtIdcard" name="idcard" type="text" class="txt03" /></td><td>QQ:</td><td><input validType="QQ" id="txtQq" name="qq" type="text" class="txt03" /></td></tr>
<tr><td>手机:</td><td><input validType="mobile" id="txtMobile" name="mobile" type="text" class="txt03" /></td><td>电话:</td><td><input id="txtTel" name="tel" type="text" class="txt03" /></td></tr>
<tr><td>家庭住址:</td><td colspan="3"><input validType="equalTo[txtMobile]" style="width:80%" id="txtHomeaddr" name="homeaddr" type="text" class="txt03" /></td></tr>
<tr><td>备注:</td><td colspan="3"> <input type="text" style="width:80%" class="txt03" id="txtRemark"></textarea></td></tr>
<tr><td> </td><td colspan="3"><input id="Checkbox1" type="checkbox" /><label>超级管理员</label>  <input id="Checkbox2" type="checkbox" /><label>禁用</label></td></tr> 
</table> 

这一段JS 是必备的

$(function(){
 $('#uiform input').each(function () {
   if ($(this).attr('required') || $(this).attr('validType'))
    $(this).validatebox();
  })
 });

 这样就ok了 

即使在提交时证实表单有未有通过认证,则可选拔上面包车型客车代码

var flag = true;

$('#uiform input').each(function () {
 if ($(this).attr('required') || $(this).attr('validType')) {
 if (!$(this).validatebox('isValid')) {
  flag = false;
  return;
 }
 }
})

if (flag)
 alert('验证通过!');
else
 alert('验证失败!');

以上便是本文的全体内容,希望对我们的就学抱有帮忙,也盼望咱们多多支持帮客之家。

EasyUI常用数据印证汇总,jqueryeasyui easyui 的validatebox()提供了自定义表达的法子,为此作者把部分常用的数据注明汇总了一晃,代码如下...

jQuery EasyUI结合zTree树形结构创建web页面,jqueryztree

JQuery EasyUI 结合 zTree树形结构创建web页面.easyui用起来比较轻便,很好的卷入了jquery的一部分功用,使用起来尤其有利,不过从1.2.3本子之后,商业用途是索要付费的,zTree是国内的大腕们搞的三个jquery树形tree插件,感觉很好用,很庞大,而且完全无需付费,API等做的也极其不错.推荐

easyui 是八个依照 jQuery 的框架,集成了各个用户分界面插件。

easyui 提供建设构造今世化的富有交互性的 javascript 应用的须要的功能。

行使 easyui,您无需写太多 javascript 代码,一般境况下你只需要选拔一些 html 标识来定义用户分界面。

HTML 网页的完全框架。

easyui 节省了开销产品的时日和规模。

easyui 特别轻松,不过意义十二分有力。

亟待的导入以下两种js文件和体制表

easyui/themes/default/easyui.css
easyui/themes/icon.css  
jquery-1.8.3.js
easyui/jquery.easyui.min.js
ztree/jquery.ztree.all-3.5.js(该手提包涵core,exhide,exedit,excheck)
ztree/zTreeStyle.css

<script type="text/javascript">   
 // ztree菜单设置
 var zTreeObj,
 setting = {
  view: {
   selectedMulti: false
  },
  // 添加编辑设置:修改树节点名称/删除树节点
  edit: {
   enable: true
  },
  data: { 
   simpleData: { 
    enable: true
   }
  },
  callback:{
   onClick: zTreeOnClick
  }
 };

 // 回调函数:单击事件
 function zTreeOnClick(event, treeId, treeNode, clickFlag) { 
  alert(treeNode.id   ", "   treeNode.name); 
  var content = '<div style="width:100%;height:100% ;overflow:hidden;">'
        '<iframe src="'
        treeNode.url
        '" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></div>';
  if(treeNode.url != undefined && treeNode.url != ""){
   // 当centre中是否存在名称为treeNode.name的tabs
   if($("#tt").tabs('exists',treeNode.name)){
    $("#tt").tabs('select',treeNode.name);
   }else {
    $("#tt").tabs('add',{
     title:treeNode.name,
     content:content,
     closable:true
    })
   }
  };
  event.preventDefault();
 };

 // 提供ztree树形菜单数据
 zTreeNodes = [ {"id":1, "pId":0, "name":"海贼王"}, 
        {"id":11, "pId":1, "name":"娜美", "url":"http://man.linuxde.net/"}, 
        {"id":12, "pId":1, "name":"罗宾", "url":"http://www.baidu.com"},
        {"id":13, "pId":1, "name":"汉库克", "url":"http://www.google.cn/"},
        { "id":2, "pId":0, "name":"父节点 2", "open":true},
        {"id":21,"pId":2, "name":"叶子节点 2-1"},
        {"id":22, "pId":2, "name":"叶子节点 2-2"},
        {"id":23,"pId":2, "name":"叶子节点 2-3"},
        {"id":3, "pId":0, "name":"父节点 3", "open":true},
        {"id":31, "pId":3, "name":"叶子节点 3-1"},
        {"id":32, "pId":3, "name":"叶子节点 3-2"},
        {"id":33, "pId":3, "name":"叶子节点 3-3"}
       ];

 // 3.生成树形菜单
 $(document).ready(function(){
  zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
 });

 // 4.对象选项卡注册右击事件
 $(document).ready(function(){
  $("#tt").tabs({
   onContextMenu:function(e,title,index){
   // 阻止系统默认的右击事件
    e.preventDefault();
    $('#mm').menu('show', {
     left: e.pageX,
     top: e.pageY
    }); 
   }
  });
 });

 // 获取所选取的面板对象
 $(document).ready(function(){
  $("#tt").tabs({
   // 获取所选取的面板对象
   onSelect : function(title,index ){
    // 5. menu的单击事件绑定
    $("#mm").menu({ 
     onClick:function(item){ 
      alert(item.name);
      // 当点击关闭当前选项卡时
      if(item.name==='current'){
       $('#tt').tabs('close',title);
      // 当点击关闭其他选项卡时
      }else if(item.name === 'others'){
       var tabs = $('#tt').tabs('tabs');
       $(tabs).each(function(){
        if($(this).panel('options').title != '消息中心' && $(this).panel('options').title != title){
         $('#tt').tabs('close',$(this).panel('options').title);
        }
       });
      // 当点击关闭所有选项卡时
      }else if(item.name === 'all'){
       var tabs = $('#tt').tabs('tabs');
       $(tabs).each(function(){
          if($(this).panel('options').title != '消息中心'){
         $('#tt').tabs('close',$(this).panel('options').title);
        }
       });
      }
     } 
    });
   }
  })
 }) 
</script> 

 相应的htm 部分代码

<body class="easyui-layout">
 <div data-options="region:'north',title:'北丐:洪七公',split:true" style="height:100px;"></div>
 <div data-options="region:'south',title:'南帝:一灯大师',split:true" style="height:100px;"></div>
 <div data-options="region:'east',iconCls:'icon-reload',title:'东邪:黄药师',split:true" style="width:100px;"></div>
 <div data-options="region:'west',title:'西毒:欧阳锋',split:true" style="width:250px;">
  <div id="aa" data-options="fit:'true'" class="easyui-accordion">
   <div title="赵敏" data-options="iconCls:'icon-save'" >
    <h3 style="color:#0099FF;">Accordion for jQuery</h3>
    <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
   </div>
   <div title="大玉儿" data-options="iconCls:'icon-reload',selected:true" >
    // ztree属性结构
    <ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
   </div>
   <div title="婉容儿" >
    who?
   </div>
  </div>
 </div>
 <div data-options="region:'center',title:'中神通:周伯通'">
  // tabs 面板
  <div id="tt" class="easyui-tabs" data-options="fit:true">
   <div title="小龙女"data-options="closable:true" ></div>
   <div title="沐剑屏" data-options="closable:true" ></div>
   <div title="阿珂" data-options="iconCls:'icon-reload',closable:true"></div>
  </div>
 </div>

 // menu菜单栏
 <div id="mm" class="easyui-menu" style="width:120px;">
  <div name="current">关闭当前选项卡</div>
  <div name="others">关闭其他选项卡</div>
  <div class="menu-sep"></div>
  <div data-options="iconCls:'icon-cancle'" name="all">关闭所有选项卡</div>
 </div>
</body>

以上就是本文的全体内容,希望对大家的上学抱有扶助,也期望大家多多帮忙帮客之家。

EasyUI结合zTree树形结构成立web页面,jqueryztree JQuery EasyUI 结合 zTree树形结构创设web页面.easyui用起来相比轻易,很好的卷入了jquery的有的功...

你只怕感兴趣的稿子:

  • easyui下拉框动态级联加载的演示代码

本文由乐百家前段发布,转载请注明来源:jQuery使用EasyUi达成三级联合浮动下拉框效果