• 类别联动下拉菜单


    适用范围:省市无限级联动,商品类别无限极联动

    需要使用到的jQuery插件为cxselect,ok说不清楚,还是直接上代码比较直观

    HTML代码如下:

    <div id="element_id" class="formControls col-xs-8 col-sm-9">
          <select class="select1" id="cate" name="category[]" data-value="" data-first-title="----全部----" style="height:30px;"></select> 
          <select class="select2" id="cate" name="category[]" data-value="" data-first-title="----全部----" style="height:30px;"></select> 
          <select class="select3" id="cate" name="category[]" data-value="" data-first-title="----全部----" style="height:30px;"></select>
          <select class="select4" id="cate" name="category[]" data-value="" data-first-title="----全部----" style="height:30px;"></select>
          <select class="select5" id="cate" name="category[]" data-value="" data-first-title="----全部----" style="height:30px;"></select> 
    </div>

    js代码如下:

     1 <script type="text/javascript" src="__STATIC__/admin/js/cxselect/jquery.cxselect.min.js"></script>
     2 
     3 function checkForm(){
     4     var categorys = [];
     5     $("#cate").each(function () {
     6         var val = $(this).val();
     7         if (val != "") {
     8             categorys.push(val);
     9         }
    10     });
    11     if (categorys.length == 0) {
    12         alert("请选择类别。");
    13         return false;
    14     }
    15     return true;
    16 }
    17 
    18 $.cxSelect.defaults.url = '/category/category.json';
    19 $('#element_id').cxSelect({
    20     selects: ['select1', 'select2', 'select3', 'select4', 'select5'],
    21     nodata: 'none',
    22     required:false,
    23     firstTitle:'----全部----',
    24     firstValue:''
    25 });

    category.json文件需要在类别管理中生成所有类别的json文件,php控制器代码如下:

    1     /*生成类别json数据*/
    2     public function createJson(){
    3         $categoryModel = new CateModel();
    4         if($categoryModel->wirteJson()){
    5             echo "<script>alert('类别数据生成成功!');location.href='index';</script>";
    6         }else{
    7             echo "<script>alert('类别数据生成失败!');location.href='index';</script>";
    8         }
    9     }

    php模型代码如下:

     1 /*生成类别JSON数据*/
     2 public function wirteJson(){
     3     $dataInfo = 	hinkDb::query("select id as v,name as n,pid from think_pro_category");
     4     $data = $this->getCategoryJson($dataInfo);
     5     return $data;
     6 }
     7 
     8 /**
     9  * 功能:无限级类别json数据生成
    10  * 参数:$data 类别查询结果集
    11  * 返回值:$json 递归查询排序后的json数据
    12  */
    13 public function getCategoryJson($dataInfo) {
    14     /*生成json数据*/
    15     foreach($dataInfo as $category) {
    16         $tree[$category['v']] = $category;
    17         $tree[$category['v']]['s'] = array();
    18     }
    19     $content = json_encode(generateTree($tree));
    20     $content = str_replace(',"s":[]', "", $content);
    21     // for( $i = 0; $i < count($dataInfo); $i++ ) {
    22     //     $content = str_replace('"'.$dataInfo[$i]['v'].'":', "", $content);
    23     // }
    24     //$content = '['.substr($content,1,strlen($content)-2).']';
    25     //return $content;
    26     /*写入文件*/
    27     //文件存放路径
    28     $filePath = $_SERVER['DOCUMENT_ROOT'].DS.'/category/category.json';
    29     $returnval = file_put_contents($filePath,$content);
    30     // $fopen = fopen($filePath,'w+');
    31     // fwrite($fopen,$content);
    32     // fclose($fopen);
    33     return $returnval;
    34 }

    公共函数:

     1 /**
     2  *处理分类数组
     3 **/
     4 function generateTree($items) {
     5     $tree = array();
     6     foreach($items as $item){
     7         if(isset($items[$item['pid']])){
     8             $items[$item['pid']]['s'][] = &$items[$item['v']];
     9         }else{
    10             $tree[] = &$items[$item['v']];
    11         }
    12     }
    13     return $tree;
    14 }
  • 相关阅读:
    Javascript面向对象编程:非构造函数的继承
    JavaScript中this 详解
    构造函数与 new 命令
    JavaScript数组去重的6个方法
    初学Java Web(9)——学生管理系统(简易版)总结
    初学Java Web(8)——过滤器和监听器
    初学Java Web(7)——文件的上传和下载
    初学Java Web(6)——JSP学习总结
    初学Java Web(5)——cookie-session学习
    初学Java Web(4)——Servlet学习总结
  • 原文地址:https://www.cnblogs.com/walblog/p/8036389.html
Copyright © 2020-2023  润新知