bootstrap搜索建议插件suggest+使用FastJSON进行JSON和String转换解析
- 作者: 陌子颜丶
- 来源: 51数据库
- 2021-08-12
上图:

先发一下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
推荐阅读
