欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

bootstrap搜索建议插件suggest+使用FastJSON进行JSON和String转换解析

程序员文章站 2022-10-02 17:16:45
上图: 先发一下json格式: { "message": "", "value": [ {...

上图:

bootstrap搜索建议插件suggest+使用FastJSON进行JSON和String转换解析

先发一下json格式:

{
	"message": "",
	"value": [
		{
			"username": "name1",
			"shortaccount": "aaa",
			"userid": "111"
		}, {
			"username": "name2",
			"shortaccount": "bbb",
			"userid": "222"
		}, {
			"username": "name3",
			"shortaccount": "ccc",
			"userid": "333"
		}, {
			"username": "name4",
			"shortaccount": "ddd",
			"userid": "444"
		}
	],
	"code": 200,
	"redirect": ""
}

前端:

引入:



<script src="/static/js/jquery.min.js"></script><script src="/static/js/bootstrap.min.js"></script><script src="/static/js/bootstrap-suggest.js"></script>

正文:


      

js:

(function() {
    /**
     * 测试(首次从 url 获取数据)
     */
    function inittest() {
        $("#test").bssuggest('init', {
            /*url: "/rest/sys/getuserlistkeyword=",
            effectivefields: ["username", "email"],
            searchfields: [ "shortaccount"],
            effectivefieldsalias:{username: "姓名"},*/
            clearable: true,
            url: "jsontest",
            idfield: "userid",
            keyfield: "username"
        }).on('ondatarequestsuccess', function (e, result) {
            console.log('ondatarequestsuccess: ', result);
        }).on('onsetselectvalue', function (e, keyword, data) {
            console.log('onsetselectvalue: ', keyword, data);
        }).on('onunsetselectvalue', function () {
            console.log('onunsetselectvalue');
        }).on('onshowdropdown', function (e, data) {
            console.log('onshowdropdown', e.target.value, data);
        }).on('onhidedropdown', function (e, data) {
            console.log('onhidedropdown', e.target.value, data);
        });
    }
    //按钮方法事件监听
    $('#methodtest button').on('click', function() {
        var method = $(this).text();
        var $i;

        if (method === 'init') {
            inittest();
        } else {
            $i = $('#test').bssuggest(method);
            if (typeof $i === 'object') {
                $i = $i.data('bssuggest');
            }
            console.log(method, $i);
            if (!$i) {
                alert('未初始化或已销毁');
            }
        }

        if (method === 'version') {
            alert($i);
        }
    });
    inittest();


    /**
     * 测试(首次从 url 获取数据,显示 header,不显示按钮,忽略大小写,可清除)
     */
    $("#testnobtn").bssuggest({
        url: "jsontest",
        /*effectivefields: ["username", "shortaccount"],
        searchfields: [ "shortaccount"],*/
        effectivefieldsalias:{username: "姓名", userid:"id", shortaccount:"参数"},
        ignorecase: true,
        showheader: true,
        showbtn: false,     //不显示下拉按钮
        delayuntilkeyup: true, //获取数据的方式为 firstbyurl 时,延迟到有输入/获取到焦点时才请求数据
        idfield: "userid",
        keyfield: "username",
        clearable: true
    }).on('ondatarequestsuccess', function (e, result) {
        console.log('ondatarequestsuccess: ', result);
    }).on('onsetselectvalue', function (e, keyword, data) {
        console.log('onsetselectvalue: ', keyword, data);
    }).on('onunsetselectvalue', function () {
        console.log("onunsetselectvalue");
    });


 


    //禁用表单提交
    $("form").submit(function() {
        return false;
    });

    //版本切换
    $('#bsversion button').on('click', function() {
        var ver = $(this).data('version');
        $('#bscss').attr('href', '//cdn.bootcss.com/bootstrap/' + ver + '/css/bootstrap.min.css');
        $('#bsjs').attr('src', '//cdn.bootcss.com/bootstrap/' + ver + '/js/bootstrap.min.js');
    });
}());

后端:

用的springm+fastjson

controller:

	@responsebody
	@requestmapping(value="/jsontest")
	public string jsontest() {
		data data = new data();
		setuser(data);
		string str = json.tojsonstring(data);
		
		return str;
	}
	
    //模拟数据
	public static void setuser(data data){
		data.setredirect("");
		data.setcode("200");
    	data.setmessage("");
    	list list = new arraylist();
    	list.add(new value("name1","aaa","111"));
    	list.add(new value("name2","bbb","222"));
    	list.add(new value("name3","ccc","333"));
    	list.add(new value("name4","ddd","444"));
    	data.setvalue(list);
	}

data类:

public class data {

	private string redirect;
	private string code;
	private string message;
	private list value;
	public string getredirect() {
		return redirect;
	}
	public void setredirect(string redirect) {
		this.redirect = redirect;
	}
	public string getcode() {
		return code;
	}
	public void setcode(string code) {
		this.code = code;
	}
	public string getmessage() {
		return message;
	}
	public void setmessage(string message) {
		this.message = message;
	}
	public list getvalue() {
		return value;
	}
	public void setvalue(list value) {
		this.value = value;
	}
	
}

value类:

public class value {
	private string username;
	private string shortaccount;
	private string userid;

	public string getshortaccount() {
		return shortaccount;
	}

	public void setshortaccount(string shortaccount) {
		this.shortaccount = shortaccount;
	}

	public string getuserid() {
		return userid;
	}

	public void setuserid(string userid) {
		this.userid = userid;
	}

	public string getusername() {
		return username;
	}

	public void setusername(string username) {
		this.username = username;
	}

	public value(string username, string shortaccount, string userid) {
		super();
		this.username = username;
		this.shortaccount = shortaccount;
		this.userid = userid;
	}

fastjson与bean之间转换

	@test
	public void jsont1() {
		
		data user = new data();
		//设置参数
		setuser(user);
		// 将javabean转成json
		system.out.println("将javabean转成json");
		string str = json.tojsonstring(user);
		system.out.println("fastjson转换后" + str);
		
		// 将json转成java bean
		system.out.println("将json转成java bean");
		
		jsonobject ob1 = jsonobject.parseobject(str);
		jsonarray trans_result1 = (jsonarray) ob1.get("value");
		jsonobject trans_result_content1 = (jsonobject) trans_result1.get(0);
		
		system.out.println(ob1);
		system.out.println(ob1.get("value"));
		system.out.println(trans_result_content1);
		system.out.println(trans_result_content1.get("username"));

	}

//设置参数用
	public static void setuser(data user){
	    	user.setredirect("");
	    	user.setcode("200");
	    	user.setmessage("");
	    	list list = new arraylist();
	    	list.add(new value("aaa"));
	    	list.add(new value("bbb"));
	    	list.add(new value("ccc"));
	    	list.add(new value("ddd"));
	    	user.setvalue(list);
	}

输出结果:

将javabean转成json
fastjson{"code":"200","message":"","redirect":"","value":[{"username":"aaa"},{"username":"bbb"},{"username":"ccc"},{"username":"ddd"}]}
将json转成java bean
{"redirect":"","code":"200","message":"","value":[{"username":"aaa"},{"username":"bbb"},{"username":"ccc"},{"username":"ddd"}]}
[{"username":"aaa"},{"username":"bbb"},{"username":"ccc"},{"username":"ddd"}]
{"username":"aaa"}
aaa