jqWEUI的select组件加载后端数据为items

jqweui不知道多少人用过,我经常用它开发webApp

它的select组件更是经常用到,但是这次我做的项目需要将select的items数据从数据库中取到,而不是页面写死的

思索了一会,终于想到一个办法,也亲测有效!

页面JS:

 $.ajax({
        url: '/items/drivers/1?expressId='+[[${expressId}]],
        dataType: "json",
        success: function(data) {
            if (data) {
                var datalist = new Array();
                for (var i = 0; i < data.length; i++) {
                    var info = { "title": data[i].name, "value": data[i].id };
                    datalist.push(info);
                }
                console.log(datalist);
                $("#bind").select({
                    title: "选择司机",
                    multi: false,
                    items: datalist,
                });
            }
        }
    });
    $.ajax({
        url: '/items/drivers/0?expressId='+[[${expressId}]],
        dataType: "json",
        success: function(data) {
            if (data) {
                var datalist = new Array();
                for (var i = 0; i < data.length; i++) {
                    var info = { "title": data[i].name, "value": data[i].id };
                    datalist.push(info);
                }
                console.log(datalist);
                $("#bind1").select({
                    title: "选择押运员",
                    multi: false,
                    items: datalist,
                });
            }
        }
    });

因为项目中要用到的这样的select组件很多,所以我把他们抽出来,单独写了个controller:

@RestController
@RequestMapping("/items")
public class LoadItemsController {

    @Autowired
    DriverService driverService;


    //加载某货运公司的司机们items
    @RequestMapping("/drivers/{exceptType}")
    public List driversItems(@PathVariable int exceptType,@RequestParam("expressId") int expressId) {
        List drivers=new ArrayList<>();
        try {
            drivers = driverService.getDriverByExpressIdAndType(expressId,exceptType);
        } catch (BussException e) {
            e.printStackTrace();
        }
        return drivers;
    }

}

还是挺简单的

你可能感兴趣的:(Web开发,H5)