博客

1.cshtml 创建一个 div

<div id="test4" class="demo-transfer"></div>

2.js 接收后台数据

 //穿梭框数据列表
    $.ajax({
        url: '/ActionModule/ActionCMD/GetList',
        method: 'GET',       
        dataType: 'JSON',
        success: function (res) {
            console.log("获得返回数据");
            console.log(res);
            //debugger;
            data2 = res;
            //显示搜索框
            //数据格式解析
            transfer.render({
                elem: '#test4'
              , title: ['左边穿梭框', '右边穿梭框']
              , data: data2
              , showSearch: true
              , id: 'key123' //定义唯一索引
              , parseData: function (res) {
                  return {
                      "value": res.id //数据值
                    , "title": res.name //数据标题，按返回数据字段名来
                    , "disabled": res.disabled  //是否禁用
                    , "checked": res.checked //是否选中
                  }
              }
              , height: 200 //定义高度
            });
        }
    })


//获取穿梭框值
var getData = transfer.getData('key123'); //获取右侧数据
//将穿梭框值数组拼接为字符串
for (var item in getData) 
{
    list += "'" + getData[item].value + "',";
}
list = joblist.substr(0, list.length - 1);//去掉最后一个逗号

3.后端

[HttpGet]
public ActionResult Getlist()
{
	var list = bll.Getlist();//返回类型为DataTable
	var json = Act.Utilities.JsonHelper.ToJson(list);//将datatable转成json,这里是自己写的方法转化
	return Content(json);
}