nodejs 使用fs实现多级联动

1.js代码

var express = require('express');
var router = express.Router();
var fs = require("fs");
/* GET users listing. */
router.get('/', function(req, res, next) {
  res.render('three', { title: 'Express' });
});
router.post('/tmpList', function(req, res, next) {
  fs.readdir("./public/tmps", function (err, files) {
    var jsonArray = new Array();                             //[{id:0,name:'陕西省'},{id:1,name:'福建省'},{id:2,name:'陕西省'}]
    jsonArray.push({id: "", name: '请选择省或地区'});
    for (var index in files) {
      var jsonObj = {};
      jsonObj.id = index;
      jsonObj.name = files[index];
      jsonArray.push(jsonObj);
    }
    console.dir(jsonArray);
    res.send(jsonArray);
  });
});
/**
 * 查询省目录下的市
 */
router.post("/cityList", function (req, res) {
  var proName = req.body.proName;
  fs.readdir("./public/tmps/" + proName, function (err, files) {
    var jsonArray = new Array();                             //[{id:0,name:'陕西省'},{id:1,name:'福建省'},{id:2,name:'陕西省'}]
    jsonArray.push({id: "", name: '请选择市'});
    for (var index in files) {
      var jsonObj = {};
      jsonObj.id = index;
      jsonObj.name = files[index];
      jsonArray.push(jsonObj);
    }
    res.send(jsonArray);
  });
});
/**
 * 查询市目录下的大类
 */
router.post("/bigTypeList", function (req, res) {
  var proName = req.body.proName;
  var cityName = req.body.cityName;
  fs.readdir("./public/tmps/" + proName + "/" + cityName + "/", function (err, files) {
    var jsonArray = new Array();
    jsonArray.push({id: "", name: '请选择大类'});
    for (var index in files) {
      var jsonObj = {};
      jsonObj.id = index;
      jsonObj.name = files[index];
      jsonArray.push(jsonObj);
    }
    res.send(jsonArray);
  });
});
/**
 * 查询大类目录下的品种
 */
router.post("/varietyList", function (req, res) {
  var proName = req.body.proName;
  var cityName = req.body.cityName;
  var bigTypeName = req.body.bigTypeName;
  fs.readdir("./public/tmps/" + proName + "/" + cityName + "/" + bigTypeName + "/", function (err, files) {
    var jsonArray = new Array();
    jsonArray.push({id: "", name: '请选择品种'});
    for (var index in files) {
      var jsonObj = {};
      jsonObj.id = index;
      jsonObj.name = files[index];
      jsonArray.push(jsonObj);
    }
    res.send(jsonArray);
  });
});
module.exports = router;

2.html代码

所需js及css在http://download.csdn.net/detail/qq_30709973/9449265

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/plugin/jquery-easyui-1.4.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/stylesheets/jquery.autocomplete.css">
    <link rel="stylesheet" type="text/css" href="/plugin/jquery-easyui-1.4.3/themes/icon.css">
    <script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/plugin/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/plugin/jquery.autocomplete.min.js"></script>
    <title></title>
    <script type="text/javascript">
        jQuery(function(){
            jQuery("#city").combobox({
                data: [
                    {
                        id: "",
                        name: "请选择市"
                    }
                ]
            });
            jQuery("#bigType").combobox({
                data: [
                    {
                        id: "",
                        name: "请选择大类"
                    }
                ]
            });
            jQuery("#variety").combobox({
                data: [
                    {
                        id: "",
                        name: "请选择品种"
                    }
                ]
            });
            jQuery("#province").combobox({
                onSelect: function (record) {
                    jQuery("#city").combobox({
                        url: '/users/cityList',
                        queryParams: {proName: jQuery("#province").combobox("getText")}
                    })
                }
            });
            jQuery("#city").combobox({
                onSelect: function (record) {
                    jQuery("#bigType").combobox({
                        url: '/users/bigTypeList',
                        queryParams: {
                            cityName: jQuery("#city").combobox("getText"),
                            proName: jQuery("#province").combobox("getText")
                        }
                    })
                }
            });
            jQuery("#bigType").combobox({
                onSelect: function (record) {
                    jQuery("#variety").combobox({
                        url: '/users/varietyList',
                        queryParams: {
                            cityName: jQuery("#city").combobox("getText"),
                            proName: jQuery("#province").combobox("getText"),
                            bigTypeName: jQuery("#bigType").combobox("getText")
                        }
                    })
                }
            });
        });
    </script>
</head>
<body>
<form method="post" id="addMarketForm">
    <div style="float: left;margin-top: 10px;">
        商品区域：<input style="width: 150px;" class="easyui-combobox" id="province" name="province"
                    data-options="valueField:'id',textField:'name',url:'/users/tmpList',panelHeight:'300px;',editable:false">
        <input style="width: 150px;" class="easyui-combobox" id="city" name="city" data-options="valueField:'id',textField:'name',panelHeight:'auto',editable:false">
    </div>
    <div style="float: left;margin-top: 10px;margin-left: 5px;">
        商品大类：<input class="easyui-combobox" id="bigType" data-options="textField:'name',valueField:'id',url:'',panelHeight:'auto',editable:false"
                    style="width: 150px;"/>
    </div>
    <div style="margin-top: 10px;float: left;margin-left: 5px;">
        品种：<input class="easyui-combobox" id="variety" data-options="textField:'name',valueField:'id',url:'',panelHeight:'auto',editable:false"
                  style="width: 150px;"/>
    </div>
</form>
</body>
</html>
posted @ 2016-03-01 14:13  爱喝酸奶的吃货  阅读(542)  评论(0)    收藏  举报