第三周工作笔记

第三周工作笔记

重写提交方法后阻止表单自提交

重写表单中的submit按钮

<form action="" method="post">
    <input type="submit" onclick="do()"/>
</form>

<script>
    function do(){
    
    }
</script>

阻止表单自提交(法一)

<form action="" method="post">
    <input type="submit" onclick="return do()"/>
</form>

<script>
    function do(){
        return false;
    }
</script>

阻止表单自提交(法二)

<form action="" method="post">
    <input type="submit" onclick="do(event)"/>
</form>

<script>
    function do(event){
       event.preventDefault();
    }
</script>

java构建json数据

目标json格式

[{
	name: "",
	children: [{
		name: "",
		children: [{}]
	}]
}]

具体实现

在相应的实体类中定义实体类数组children

private ArrayList<CityInfo> children;
public ArrayList<CityInfo> getChildren(){
	return this.children;
}
public void setChildren(ArrayList<CityInfo> cInfos){
	this.children = cInfos;
}

使用mybatis-plus的条件查询方法获得实体类list

List<CityInfo> city = new ArrayList<CityInfo>();
	//查询城市信息
	QueryWrapper<CityInfo> qWrapper = new QueryWrapper<>();
	qWrapper.select("dqid,dqmc,dqjb,sjdqid,children");
	city = cityDao.selectList(qWrapper);

目标json格式是三维的，并且需要将子节点放到对应得父节点的children中
定义三个实体类list并从底层开始拼接json数据

//用来存储三级城市信息的list
	List<CityInfo>arrTop = new ArrayList<CityInfo>();
	List<CityInfo>arrSec = new ArrayList<CityInfo>();
	List<CityInfo>arrThi = new ArrayList<CityInfo>();
	for(CityInfo cInfo:city ){
		if(cInfo.getDqjb().equals("3")){
            arrThi.add(cInfo);
		}
		if(cInfo.getDqjb().equals("2")){
	     	arrSec.add(cInfo);
		}
		if(cInfo.getDqjb().equals("1")){
			arrTop.add(cInfo);
		}
	}
		
	//组装二级json
	for(int i=0;i<arrSec.size();i++){
		for(int j=0;j<arrThi.size();j++){
			if(arrThi.get(j).getSjdqid().equals(arrSec.get(i).getDqid())){
				arrSec.get(i).putChildren(arrThi.get(j));
			}
		}
	}
	//组装一级json
	for(int i=0;i<arrTop.size();i++){
		for(int j=0;j<arrSec.size();j++){
			if(arrSec.get(j).getSjdqid().equals(arrTop.get(i).getDqid())){
				arrTop.get(i).putChildren(arrSec.get(j));
			}
		}
	}

将最后的实体类list通过fastJson的JSON.toJSONString转换成json格式

returnJson = JSON.toJSONString(arrTop);

zTree插件的使用

配置文件

 var setting_city = {
        async:{
         enable:true,
         type: "get",
         dataFilter: filter,
         url:"<%=path%>/admin/cityData"
        },
        view: {
         selectedMulti: false,
         expandSpeed: "normal"
        },
        check: {
         enable: true
        },
        data: {
         key:{
         name: "dqmc"
    	},
        simpleData: {
        //根据json数据变化
         enable: true,
         idKey: "dqid",
		 pIdKey: "sjdqid"
         }
        },
        callback:{
         beforeCheck:checkYZ,
         onCheck:onCheck,
         onAsyncSuccess: zTreeOnAsyncSuccess
        }
};

在html中定义一个ul标签

<ul id="cityTree" class="ztree cityTree"></ul>

从服务器端返回的数据不能直接解析，需要先通过async配置的filter转换成json对象

//数据预处理
function filter(treeId, parentNode, responseData){
    var data = JSON.parse(responseData);
	return data;
}

使用配置文件进行初始化

$.fn.zTree.init($("#cityTree"),setting_city,null);

效果图

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦