MVC bootstrap 實現 bootstrap table 左右傳遞數據
源碼：javascript
@{ ViewBag.Title = "Index"; } @using BC.Platform.UPMS.Models; <!DOCTYPE html> <html lang="zh-CN"> <head> <meta name="viewport" content="width=device-width" /> <title>用戶管理</title> <!--[if lt IE 9]> <meta http-equiv="refresh" content="0;ie.html" /> <![endif]--> @Styles.Render("~/Bootstrap/css/bootstrap-theme.css") @Styles.Render("~/Bootstrap/css/bootstrap.min.css") @Styles.Render("~/Bootstrap/css/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css") @Styles.Render("~/Bootstrap/css/plugins/bootstrap-validator/bootstrap-validator.css") @Styles.Render("~/Bootstrap/css/plugins/bootstrap-treeview/bootstrap-treeview.css") @Styles.Render("~/Bootstrap/css/plugins/bootstrap-table/bootstrap-table.min.css") @Styles.Render("~/Bootstrap/css/plugins/bootstrap-jquery-confirm/jquery-confirm.css") @Styles.Render("~/Bootstrap/css/plugins/bootstrap-treeview/bootstrap-treeview.min.css") @Styles.Render("~/Bootstrap/css/plugins/bootstrap-layer/layer.css") @Styles.Render("~/Bootstrap/css/plugins/bootstrap-validator/bootstrap-validator.css") @Styles.Render("~/Bootstrap/css/plugins/bootstrap-bc-platform/style.min.css") @Styles.Render("~/Bootstrap/css/font-awesome.min.css") </head> <body class="gray-bg"> <div style="margin: 0px 5px 0px 5px; "> <div class="col-sm-12" style="padding-left: 0px; padding-right: 0px;"> @*這裏是tree 開始*@ <div class="col-sm-3" style="padding-left: 0px; padding-right: 5px;"> <div class="ibox-title"><i class="fa fa-table"></i> 分組角色列表<div class="ibox-title-div-right"> <i class="fa fa-refresh"><a id="btnRefresh" class="ibox-title-href" href="#">刷新</a></i></div></div> <div class="alert alert-info" style="margin-top:10px;margin-bottom:10px"> <strong>當前角色:</strong><label id="lblRoleName" style="margin-bottom: 0px;">您尚未選擇</label> </div> <div class="ibox-content"> <label for="treeGroupRole"></label> <div id="treeGroupRole" /> </div> </div> @*這裏是tree 結束*@ </div> <div class="col-sm-9" style="padding-left: 0px; padding-right: 0px;"> <div class=" col-sm-5" style="padding-left: 0px; padding-right: 0px;"> <div class="ibox-title"> <i class="fa fa-table"></i> 當前用戶<div class="ibox-title-div-right"> <i class="fa fa-remove"><a id="btn_delete_L" class="ibox-title-href" href="#">刪除</a></i> <i class="fa fa-search"><a id="btn_search_L" class="ibox-title-href" href="#">查找</a></i> <i class="fa fa-save"><a id="btn_save_L" class="ibox-title-href" href="#">保存</a></i> </div> </div> <div class="alert alert-info" style="margin-top:10px;margin-bottom:10px"> <strong>舒適提示:</strong>記得選擇左邊角色 </div> <div class="ibox-content"> <div class="row"> <div class="col-sm-12"> <input id="txt_UserName_L" name="txt_UserName_L" class="form-control" type="text" placeholder="用戶名"> </div> </div> <!--主列表信息 開始--> <div class="ibox-content-details"> <table id="tableRoleUser_L" class="table table-bordered table-striped table-hover" cellspacing="0" width="100%"></table> </div> <!--主列表信息 結束--> </div> </div> <div class=" col-sm-1" style="margin-top: 20% ;padding-left: 5px; padding-right: 5px;"> <button id="btnRight" data-method="append" class="btn btn-info btn-large btn-block " type="button"> <i class="fa fa-angle-double-right"></i> </button> <button id="btnLeft" data-method="append" class="btn btn-info btn-large btn-block " type="button"> <i class="fa fa-angle-double-left"></i> </button> </div> <div class=" col-sm-6" style="padding-left: 0px; padding-right: 0px;"> <div class="ibox-title"> <i class="fa fa-table"></i> 所有用戶<div class="ibox-title-div-right"> <i class="fa fa-search"><a id="btn_search_R" class="ibox-title-href" href="#">查找</a></i> </div> </div> <div class="alert alert-info" style="margin-top:10px;margin-bottom:10px"> <strong>舒適提示:</strong>選中如下用戶可添加到左邊 </div> <div class="ibox-content"> <div class="row"> <div class="col-sm-12"> <input id="txt_UserName_R" name="txt_UserName_R" class="form-control" type="text" placeholder="用戶名"> </div> </div> <!--主列表信息 開始--> <div class="ibox-content-details"> <table id="tableRoleUser_R" class="table table-bordered table-striped table-hover" cellspacing="0" width="100%"></table> </div> <!--主列表信息 結束--> </div> </div> </div> </div> @Scripts.Render("~/jQuery/jquery-2.1.1.min.js") @Scripts.Render("~/Bootstrap/js/bootstrap.min.js") @Scripts.Render("~/Bootstrap/js/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js") @Scripts.Render("~/Bootstrap/js/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js") @Scripts.Render("~/Bootstrap/js/plugins/bootstrap-validator/bootstrap-validator.js") @Scripts.Render("~/Bootstrap/js/plugins/bootstrap-treeview/bootstrap-treeview.js") @Scripts.Render("~/Bootstrap/js/plugins/bootstrap-table/bootstrap-table.min.js") @Scripts.Render("~/Bootstrap/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js") @Scripts.Render("~/Bootstrap/js/plugins/bootstrap-jquery-confirm/jquery-confirm.js") @Scripts.Render("~/Bootstrap/js/plugins/bootstrap-layer/2.1/layer.js") @Scripts.Render("~/Bootstrap/js/bc.platform.js") <script type="text/javascript"> var RoleName; var GroupId = 0; var RoleId = 0; //加載樹數據 function LoadingTreeGroupRole() { //"[{\"id\":\"1\",\"text\":\"北京angbcc公司\",\"href\":\"北京angbcc公司\",\"tags\":\"0\"},{\"id\":\"9\",\"text\":\"北京bngbcc公司\",\"href\":\"北京bngbcc公司\",\"tags\":\"0\"}]" //同步獲取 $.ajax({ type: 'GET', url: '/RoleUser/GetGroupRoleTreeList', async: false,//同步 dataType: 'json', success: function (json) { data = eval('(' + json + ')'); $('#treeGroupRole').treeview({ data: data, onNodeSelected: function (event, node) { $('#selectable-output').prepend('<p>' + node.href + "-" + node.text + ' was selected</p>'); var strhref = node.href; GroupId = strhref.split('-')[0]; RoleId = strhref.split('-')[1]; RoleName = node.text; $("#lblRoleName").html(RoleName); $('#tableRoleUser_L').bootstrapTable('refresh'); }, onNodeUnselected: function (event, node) { // $('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>'); } }); }, error: function (xhr, status, error) { alert("操做失敗"); //xhr.responseText } }); } function LoadingDataList_L() { $('#tableRoleUser_L').bootstrapTable({ url: '/RoleUser/GetRoleUserList', method: 'get', //默認是post,不容許對靜態文件訪問 cache: false, striped: true, // 隔行加亮 pagination: true, // 開啓分頁功能 pageSize: 20, // 設置默認分頁爲 20 pageNumber: 1, pageList: [10, 25, 50, 100, 200], // 自定義分頁列表 //contentType: "application/x-www-form-urlencoded",//若是想用request.form 方式，設置 contentType: "application/x-www-form-urlencoded", search: false,//開啓搜索功能 sidePagination: 'server',//設置爲服務器端分頁 queryParamsType: "", queryParams: queryParams_L,//參數 showColumns: false, // 開啓自定義列顯示功能 showRefresh: false, // 開啓刷新功能 minimumCountColumns: 2,// 設置最少顯示列個數 clickToSelect: true, smartDisplay: true, clickToSelect: true, // 單擊行便可以選中 sortName: 'Row_NumberId', // 設置默認排序爲 name sortOrder: 'desc', // 設置排序爲反序 desc smartDisplay: true, // 智能顯示 pagination 和 cardview 等 dataType: "json", columns: [{ field: 'checked', checkbox: true, formatter: stateFormatter_L, align: 'left', }, { field: 'Row_NumberId', title: '序號', align: 'left', }, { field: 'UserName', title: '帳戶', align: 'left', }, { field: 'FullName_C', title: '姓名', align: 'left', },{ field: 'RoleName', title: '角色', align: 'left', } ] }); } //設置傳入參數 function queryParams_L(params) { var temp = { //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的 limit: params.pageSize, page: params.pageNumber, RoleId: RoleId, GroupId: GroupId, }; return temp; } /** * 複選按鈕默認選中 格式化 */ function stateFormatter_L(value, row, index) { if (row.state == true) return { disabled: true,//設置是否可用 checked: true//設置選中 }; return value; } function LoadingDataList_R() { $('#tableRoleUser_R').bootstrapTable({ url: '/Users/GetUsersList', method: 'get', //默認是post,不容許對靜態文件訪問 cache: false, striped: true, // 隔行加亮 pagination: true, // 開啓分頁功能 pageSize: 20, // 設置默認分頁爲 20 pageNumber: 1, pageList: [10, 25, 50, 100, 200], // 自定義分頁列表 //contentType: "application/x-www-form-urlencoded",//若是想用request.form 方式，設置 contentType: "application/x-www-form-urlencoded", search: false,//開啓搜索功能 sidePagination: 'server',//設置爲服務器端分頁 queryParamsType: "", queryParams: queryParams_L,//參數 showColumns: false, // 開啓自定義列顯示功能 showRefresh: false, // 開啓刷新功能 minimumCountColumns: 2,// 設置最少顯示列個數 clickToSelect: true, smartDisplay: true, clickToSelect: true, // 單擊行便可以選中 sortName: 'Row_NumberId', // 設置默認排序爲 name sortOrder: 'desc', // 設置排序爲反序 desc smartDisplay: true, // 智能顯示 pagination 和 cardview 等 dataType: "json", columns: [{ field: 'checked', checkbox: true, formatter: stateFormatter_R, align: 'left', }, { field: 'Row_NumberId', title: '序號', align: 'left', }, { field: 'UserName', title: '帳戶', align: 'left', }, { field: 'FullName_C', title: '姓名', align: 'left', }, { field: 'OrganizationName', title: '結構名稱', align: 'left', }] }); } //設置傳入參數 function queryParams_R(params) { var temp = { //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的 limit: params.pageSize, page: params.pageNumber, UserName: $("#txt_UserName_R").val() }; return temp; } /** * 複選按鈕默認選中 格式化 */ function stateFormatter_R(value, row, index) { if (row.state == true) return { disabled: true,//設置是否可用 checked: true//設置選中 }; return value; } </script> <script type="text/javascript"> $(function () { LoadingTreeGroupRole(); LoadingDataList_L(); LoadingDataList_R(); $('#btnRefresh').click(function () { LoadingTreeGroupRole(); }) //查詢 $('#btn_search_L').click(function () { $('#tableRoleUser_L').bootstrapTable('refresh') }); $('#txt_UserName_L').keyup(function (e) { if (e.keyCode === 13) { $('#tableRoleUser_L').bootstrapTable('refresh') } }); //查詢 $('#btn_search_R').click(function () { $('#tableRoleUser_R').bootstrapTable('refresh') }); $('#txt_UserName_R').keyup(function (e) { if (e.keyCode === 13) { $('#tableRoleUser_R').bootstrapTable('refresh') } }); }); </script> <script type="text/javascript"> //將右邊的數據移動到左邊 $('#btnLeft').click(function () { var selectContent = $('#tableRoleUser_R').bootstrapTable('getSelections'); $('#tableRoleUser_L').bootstrapTable("append", selectContent); var selects = $('#tableRoleUser_R').bootstrapTable('getSelections'); UserId = $.map(selects, function (row) { return row.UserId; }); UserName = $.map(selects, function (row) { return row.UserName; }); FullName_C = $.map(selects, function (row) { return row.FullName_C; }); $('#tableRoleUser_R').bootstrapTable('remove', { field: 'UserId', values: UserId }, { field: 'UserName', values: UserName }, { field: 'FullName_C', values: FullName_C }); }); //將左邊的數據移動到右邊 $('#btnRight').click(function () { var selectContent = $('#tableRoleUser_L').bootstrapTable('getSelections'); $('#tableRoleUser_R').bootstrapTable("append", selectContent); var selects = $('#tableRoleUser_L').bootstrapTable('getSelections'); UserId = $.map(selects, function (row) { return row.UserId; }); UserName = $.map(selects, function (row) { return row.UserName; }); FullName_C = $.map(selects, function (row) { return row.FullName_C; }); $('#tableRoleUser_L').bootstrapTable('remove', { field: 'UserId', values: UserId }, { field: 'UserName', values: UserName }, { field: 'FullName_C', values: FullName_C }); $('#tableRoleUser_R').bootstrapTable('refresh') }); //保存數據 $('#btn_save_L').click(function () { var selects = $('#tableRoleUser_L').bootstrapTable('getSelections'); UserId = $.map(selects, function (row) { return row.UserId; }); FullName_C = $.map(selects, function (row) { return row.FullName_C; }); var strUserId = ""; for (var i = 0; i < UserId.length; i++) { strUserId += UserId[i] + ','; } var strFullName_C = ""; for (var i = 0; i < FullName_C.length; i++) { strFullName_C += FullName_C[i] + ','; } strUserId = strUserId.substring(0, strUserId.length - 1); strFullName_C = strFullName_C.substring(0, strFullName_C.length - 1); if (GroupId == 0 && RoleId == 0) { layer.alert('請在左側選擇角色', { icon: 6 }); } else if (UserId == "") { layer.alert('請在右側選擇用戶', { icon: 6 }); } else { var _json = jQuery.param({ "GroupId": GroupId, "RoleId": RoleId, "UserId": strUserId });//這是參數 $.confirm({ title: '舒適提示', content: '肯定要將【' + strFullName_C + '】保存到角色【' + $("#lblRoleName").html() + '】嗎？', confirmButton: '肯定', cancelButton: '關閉', confirm: function () { $.ajax({ url: '/RoleUser/InsertRoleUser', type: 'post', async: false, data: _json, dataType: 'json', cache: false, success: function (result) { $('#tableRoleUser_L').bootstrapTable('refresh') } }) }, cancel: function () { } }); } }); //刪除數據 $('#btn_delete_L').click(function () { var selects = $('#tableRoleUser_L').bootstrapTable('getSelections'); RoleUserId = $.map(selects, function (row) { return row.RoleUserId; }); FullName_C = $.map(selects, function (row) { return row.FullName_C; }); var strRoleUserId = ""; for (var i = 0; i < RoleUserId.length; i++) { strRoleUserId += RoleUserId[i] + ','; } var strFullName_C = ""; for (var i = 0; i < FullName_C.length; i++) { strFullName_C += FullName_C[i] + ','; } strRoleUserId = strRoleUserId.substring(0, strRoleUserId.length - 1); strFullName_C = strFullName_C.substring(0, strFullName_C.length - 1); if (GroupId == 0 && RoleId == 0) { layer.alert('請在左側選擇角色', { icon: 6 }); } else if (RoleUserId == "") { layer.alert('請選擇要刪除用戶', { icon: 6 }); } else { $.confirm({ title: '舒適提示', content: '肯定要將【' + strFullName_C + '】從角色【' + $("#lblRoleName").html() + '】移除嗎？', confirmButton: '肯定', cancelButton: '關閉', confirm: function () { var _json = jQuery.param({ "GroupId": GroupId, "RoleId": RoleId, "RoleUserId": strRoleUserId });//這是參數 $.ajax({ url: '/RoleUser/DeleteRoleUserByRoleUserId', type: 'post', async: false, data: _json, dataType: 'json', cache: false, success: function (result) { $('#tableRoleUser_L').bootstrapTable('refresh') } }) }, cancel: function () { } }); } }); </script> </body> </html>
相關文章
- 1. BootStrap table 傳遞搜索參數
- 2. bootstrap table 實例
- 3. Bootstrap Table 查詢實現
- 4. bootstrap table load數據
- 5. bootStrap table spring mvc 詳細運用實例
- 6. bootstrap Table
- 7. bootstrap table 實現父子表
- 8. bootstrap table實例
- 9. table實現 js數據訪問 傳遞json數據用render_to_response
- 10. 用MVC作一個bootstrap-table的實例
- 更多相關文章...
- • C# 傳遞數組給函數 - C#教程
- • ASP.NET MVC - SQL 數據庫 - ASP.NET 教程
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
