1. 程式人生 > >bootstrap table 行內編輯 select2 多選問題

bootstrap table 行內編輯 select2 多選問題

bootstrap table 行內編輯Select2多選 需要修改bootstrap-editable.js原始碼的itemsByValue方法

當多選時,回傳類似 ",1,2,3"的字串,需要轉換成陣列

列定義

var columns = [{
            title : '列名',
            field : 'zpyq',
            align : 'center',
            width : "25%",
            editable : {
                type : 'select2',
                title : '列名',
                name : 'zpyq',
                emptytext : "--",
                placement : 'top',
                source : function() {//動態獲取資料
                    var result = [];
                    $.ajax({
                                url : $.el.Register.AppUrl + "rwfp/selectZjyqB",
                                async : false,
                                type : "get",
                                data : {},
                                success : function(data, status) {
                                    $.each(data, function(key, value) {
                                                result.push({
                                                            value : value.id,
                                                            text : value.zkyq
                                                        });
                                            });
                                }
                            });
                    return result;
                },
                inputclass : 'input-large',
                select2 : {
                    allowClear : true,
                    multiple : true,//多選
                    tokenSeparators : [",", " "],
                    width : '150px'//設定寬

                }
            }
        }]

bootstrap-editable.js原始碼修改

	itemsByValue : function(value, sourceData, valueProp) {
			if (!sourceData || value === null) {
				return [];
			}

			if (typeof(valueProp) !== "function") {
				var idKey = valueProp || 'value';
				valueProp = function(e) {
					return e[idKey];
				};
			}
			/**
			 * @author ZhangZhi 2017-02-05
			 *  行內編輯select2多選設定
			 */
			value += "";
			if (value.substr(0, 1) == ',')
				value = value.substr(1);
			value = value.split(',');
			/**
			 * 修改結束
			 */
			var isValArray = $.isArray(value), result = [], that = this;



相關推薦

bootstrap table 編輯 select2 問題

bootstrap table 行內編輯Select2多選 需要修改bootstrap-editable.js原始碼的itemsByValue方法 當多選時,回傳類似 ",1,2,3"的字串,需要轉

bootstrap-table 編輯

根據 ext ots json fail defined www. edi .html 所需的樣式和js文件: https://pan.baidu.com/s/1eSAKzyM 密碼: s3wh 參考 : http://www.cnblogs.com/landeanfen/

關於Bootstrap table 編輯

行內編輯是很方便的編輯形式。通過各種嘗試,發現了三種方法。 1.bootstrap table 自帶的行內編輯: 也許是最簡單的bootstrap-table 表格行內編輯實現!!! 確認可用。方法簡便,不需要其他的擴充套件js,缺點也在此,擴充套件麻煩,對於前端小白來說,難度太大。

bootstrap-table編輯表格的實現

bootstrap-table官網上有editable和click-edit-row的例子,但是前者通過設定表格中某一列是否可編輯屬性來控制行內編輯,會給可編輯的單元格新增格外的樣式,且每編輯一個單元格就要點選一次確認或取消按鈕。後者通過設同時置表格整體是否可編

bootstrap-table 編輯簡單實現

$('#table').bootstrapTable({ url: createUrl(''), striped: true, uniqueId: 'attrValue',

element-ui table 編輯

EditRow.ts interface NoParamConstructor<T> { new(): T; } export default class EditRow<T> { origin: T = null copy: T =

基於bootstrap table分頁資料及編輯和匯出資料(一)

第一步,匯入相應的css和js檔案      <link href="~/Content/bootstrap.min.css" rel="stylesheet" />     <!-----swich按鈕需要的css檔案-->     <

easyui data-grid 實現編輯 操作 功能

1、datagrid配合單元格編輯的部分 配置datagrid屬性: onDblClickCell:onDblClickCell,onEndEdit:onEndEdit var dg = $('#dg').datagrid({

bootstrap-table實現編輯

很多時候使用行內編輯會該操作者帶來更清爽的體驗實現bootstrapTable行內編輯:首先匯入相關依賴:<!--引用BootStrap的JavaScript外掛--> <script src="#(basePath)/page/js/jquery.min.

怎樣實現在DBGrid中雙擊選擇整,並且可以?謝謝!!

謝謝 oid next rst enable .get click controls mouseup DBGrid1->Options裏有個dgMultiSelect,把它設為true就能多選了 先設置DBGrid1->options中dgRowSelect

VUE+Element UI實現簡單的表格編輯效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入樣式 --> <link rel="stylesheet" href="https://

前端之路:bootstrap table 按鈕,元素,點事件沒反應,無效的解決方方案。

問題:bootstrap table 生成的表格裡formatter新增 的  HTML元素 按鈕,js 中新增  點選事件,點選沒反應。或者點選好多次,重新整理在點選,才有反應。             最近專

select2下拉功能

AngularJS完成select2多選下拉功能 1、引入js及css資源 2、頁面新增select標籤 1、引入js及css資源 <script src="../plugins/angularjs/angul

bootstrapTable 實現指定欄位編輯,無彈窗,自動儲存

    最近做一個專案時,使用bootstrapTable 作為表格進行資料展示,客戶要求對數量欄位更直觀的行內編輯,研究了一下網上的方案並參考了下面的文章 bootstrapTable行內動態編輯行中某列欄位資料(優化版:無需彈框,直接在行內更新) ,對文中的程式碼進行改

select2設定selectselect2取值和賦值

select2設定select多選,select2取值和賦值,作為篩選條件的時候,取值相對簡單,把選中的id值轉為字串傳給後端查詢,查詢之後會重新整理頁面,為了在下拉框中顯示剛剛選中的值,就需要給select賦值,可以將剛才傳給後端的字串再傳回前端,然後轉為一位陣列,再賦值給select2就會顯

(轉)select2框無法手動排序問題

select2是一個不錯的選擇框外掛,支援單選、多選、AJAX等,還有豐富的介面,官網是 https://select2.org/ 常用的樣式效果圖如下: 在一個專案中,我使用了它的AJAX搜尋和選擇,但發現一個問題,專案需要對選擇的內容保留它新增時相應的排序,比如one/t

select2

人工 提交 代碼 select src sel 註意 png 圖1 在TCX_1710項目中的拒絕代碼配置頁面可以選擇多個拒絕字段,效果圖如下 代碼中需要註意的有以下地方:圖1為提交保存時對多選數據的獲取,圖2為修改是對多選數據的回顯 對於多選框寬度太窄的問題,

jqGrid 設定是否能編輯

 onCellSelect:function(id){   var d=$("#grid-table").jqGrid('getRowData',id).unable; if(d==0){ $("#grid-table").setColProp

datagrid新增,編輯

實現效果 <div data-options="region:'east',split:true,border:false" title="部門列表" style="width:13%;"> <table id="dept_data

bootstrap】 file-input,無法。(總是替換前一張圖片)

<input id="myFile" type="file" name="myFile" multiple class="fileloading"> 我找了半天fileinput.js裡的