1. 程式人生 > >Bootstrap-Table+Select2+SpringBoot實現多選級聯

Bootstrap-Table+Select2+SpringBoot實現多選級聯

開發十年,就只剩下這套架構體系了! >>>   

如下圖,要選擇選中科室下的所有病房,Bootstrap-Table 傳參似乎支援URL如:?params=xxx 的方法進行

所以我只能通過前段封裝一個類似於 x-x-x-x 每個x代表一個科室用“-”作為分割符號的方式傳遞給到後臺

js 程式碼如下:

$("#department").change(function () {
    var depts = null;
        var deptsall="";
        var o=document.getElementById('department').getElementsByTagName('option'); //select2多選取值
        for(var i=0;i<o.length;i++){
            if(o[i].selected){
                deptsall+=o[i].value+"-";
            }
        }
        deptsall = deptsall.substr(0, deptsall.length - 1); //減去最後一個"-"
        $.ajax({
            async: false,
            success: function() {
                depts = deptsall; //利用ajax給全域性變數賦值
            }
        })
        console.log(depts)
    $("#ward").empty()
    // var wardid = $(this).children('option:selected').val();
    $("#ward").select2({
        placeholder: "請先選擇醫院",
        language: "zh-CN",
        ajax: {
            type: 'GET',
            url: "/ward/list?wid=" + depts,
            dataType: 'json',
            delay: 250,
            processResults: function (data) {
                return {
                    results: data
                    //必須賦值給results並且必須返回一個obj
                };
            },
        },
        placeholder:'請選擇',//預設文字提示
        language: "zh-CN",
        // tags: true,//允許手動新增
        allowClear: true,//允許清空
        escapeMarkup: function (markup) { return markup; }, // 自定義格式化防止xss注入
        minimumResultsForSearch: -1,//最少輸入多少個字元後開始查詢
        formatResult: function formatRepo(repo){return repo.text;}, // 函式用來渲染結果
        formatSelection: function formatRepoSelection(repo){return repo.text;} // 函式用於呈現當前的選擇
    });

});

後臺接收引數

@RequestMapping("/ward")
public class WardController {
    private static final Logger logger = LoggerFactory.getLogger(WardController.class);

    @Autowired
    WardRepository wardRepository;
    @GetMapping("/list")
    @ResponseBody
    public String getWardList(@RequestParam(required=false) String wid
    ){
        List<Ward> result = wardRepository.findWardList(StringtoInteger.StoI(wid));
        JSONArray list = JSONObject.parseArray(JSON.toJSONString(result));
        String wards = JSON.toJSONString(list);
        return wards;
    }
}

JPA實現where in 需要使用List<Integer>數字列表形式,所以寫了一個轉換方法 StringtoInteger.StoI,把前臺接受到的String變為List<Integer>

import java.util.ArrayList;
import java.util.List;

public class StringtoInteger {

    public static List<Integer> StoI(String str){
        String[] Str2Array = str.split("-");
        List<Integer> idgroup = new ArrayList<Integer>();
        for (String item: Str2Array ){
            Integer InteItem = Integer.parseInt(item);
            idgroup.add(InteItem);
        }
        System.out.println(idgroup);
        return idgroup;
    }
}

JPA查詢API封裝

@Repository
public interface WardRepository extends JpaRepository<Ward, Long>,JpaSpecificationExecutor<Ward> {

    @Query(nativeQuery = true,value="select w.id,w.wardname,w.department_id from ward w left join department d on w.department_id = d.id where w.department_id in :id")
    List<Ward> findWardList(@Param("id") List<