文章/答案/技术大牛

发布

社区首页 >问答首页 >jexcel仅将下拉列表添加到一行

问jexcel仅将下拉列表添加到一行
EN

Stack Overflow用户

提问于 2020-01-23 19:58:21

回答 2查看 1.5K关注 0票数 0

如何将下拉列表添加到jexcel表格中的单行？我已经设法将下拉列表添加到不同的列中，方法是像这样声明" columns“变量：

$('#reportCD').jexcel({
  url: 'update.php',
  colWidths: [150 <?php echo $cwOut; ?>],
  colAlignments: ['left', 'left'],
  allowInsertRow: false,
  allowDeleteRow: false,
  columns: [{
    type: 'text',
    readOnly: true
  }, {
    type: 'dropdown',
    source: [{ 'id': '', 'name': 'Normal' }, { 'id': 'B', 'name': 'B' }, { 'id': 'I', 'name': 'I' }, { 'id': 'BR', 'name': 'BR' }, ]
  }],
  columnSorting: false,
  onchange: change
});

但我需要下拉列表是基于行的，而不是基于列的。我找不到任何关于这方面的文档。有什么想法吗？

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-24 19:14:47

根据Paul使用data-x和data-y值的输入，我能够通过添加一些自定义代码并稍微修改jexcel.js文件来解决这个难题。

该页面如下所示：

<html>
<head>
<script src="jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>

<link rel="stylesheet" href="https://bossanova.uk/jexcel/v3/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style> 
.popover2 {
    display: block; top: 60px; left: 460px;
    position: absolute;
    margin-top: 0px;
    z-index: 1010;
    width: 300px;
    padding: 1px;
    text-align: left;
    white-space: normal;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
    </style>
</head>
<body>
<div id="custom"></div>


<p id="demo"></p>

<select id="locality-dropdown" name="locality" class="popover2" style="visibility:hidden;">
</select>


<script>
var data2 = [
    ['PHP', '14:00', 'Text field'],
    ['Javascript', '16:30', ''],
];

var customColumnTwo = {

    // Methods
    closeEditor : function(cell, save) {
        var testx1 =  cell.getAttribute('data-x'); //Get data-x value from cell
        var testy1 =  cell.getAttribute('data-y'); //Get data-y value from cell
        var e = document.getElementById("locality-dropdown"); //Define custom selection

        //Find cell that will use custom dropdown based on data-x and data-y
        if (testx1 == 2 && testy1 == 1) {
            var value = e.options[e.selectedIndex].text; //Define value of custom cell
        } else {
            var value = cell.children[0].value; //Define value of non-custom cell in same column
        }

        cell.innerHTML = value; //Set value of cell
        e.style.visibility = 'hidden'; //Hide dropdown after select
        return value; //Return value

    },
    openEditor : function(cell) {
        var testx1 =  cell.getAttribute('data-x'); //Get data-x value from cell
        var testy1 =  cell.getAttribute('data-y'); //Get data-y value from cell

        // Create input
        var element = document.createElement('input');
        element.value = cell.innerHTML;
        // Update cell
        cell.classList.add('editor');
        cell.innerHTML = '';
        cell.appendChild(element);

        //Find cell that will use custom dropdown based on data-x and data-y
        if (testx1 == 2 && testy1 == 1) {

            var e = document.getElementById("locality-dropdown"); //Define custom selection
            e.style.visibility = 'visible'; //Show dropdown on select

                //Construct custom dropdown
                let dropdown = $('#locality-dropdown');
                dropdown.empty();
                dropdown.append('<option selected="true" disabled>Select...</option>');
                dropdown.prop('selectedIndex', 0);
                            const url = 'json/columnType.json'; //Deine data source of the dropdown list
                            $.getJSON(url, function (data) {
                $.each(data, function (key, entry) {
                    dropdown.append($('<option></option>').attr('value', entry.abbreviation).text(entry.name)); //Append data to dropdown
                })
                });         
    }
        // Focus on the element
        element.focus();
    },
    getValue : function(cell) {     
        return cell.innerHTML;
    },
    setValue : function(cell, value, save) {

        var testx =  cell.getAttribute('data-x'); //Get data-x value from cell
        var testy =  cell.getAttribute('data-y'); //Get data-y value from cell
        if (testx == 2 && testy == 1) {
        var e = document.getElementById("locality-dropdown");
            var value = e.options[e.selectedIndex].text;
            return value;
        } else {
            cell.innerHTML = value;
        }  
    }  
}

myTable = jexcel(document.getElementById('custom'), {
    data:data2,
    columns: [
        { type: 'text', title:'Course Title', width:300 },
        { type: 'text', title:'Time', width:100},
        { type: 'text', title:'Custom data', width:300, autocomplete:true, multiple:true, editor:customColumnTwo}, // Remote source for dropdown
     ]
});


</script>
</body>
</html>

填充自定义下拉列表的JSON数据是(columnType.json文件)：

[
{"name": "TOT", "id": "TOT"},
{"name": "SUM", "id": "SUM"},
{"name": "UNIT", "id": "UNIT"},
{"name": "BUDGET", "id": "BUDGET"}
]

最后，通过替换以下代码来完成原始jexcel.js文件中的更正代码：

else if (obj.options.columns[i].type == 'dropdown' || obj.options.columns[i].type == 'autocomplete')

要在验证时包含新的自定义字段，请执行以下操作：

else if (obj.options.columns[i].type == 'dropdown' || obj.options.columns[i].type == 'autocomplete' || (obj.options.columns[i].editor == customColumnTwo && td.getAttribute('data-x') == 2 && td.getAttribute('data-y') == 1))

最后一点只是为了确保在自定义单元格中填充了dropdown-sign，以向用户指示有一个dropdown-option。

现在，自定义dropdown的样式可以进行改进，因为在本例中它不是动态的，所以您可以自己设计dropdown的样式。

我希望这能在未来帮助其他人！

票数 -1

Stack Overflow用户

发布于 2020-02-08 06:02:17

惟一的方法是创建自定义列，并相应地检查要呈现的data-y data-x。下面是如何创建自定义编辑器示例。

<html>
<script src="https://bossanova.uk/jexcel/v3/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v3/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<link rel="stylesheet" type="text/css" href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>

<div id="custom"></div>

<script>
var data2 = [
    ['PHP', '14:00'],
    ['Javascript', '16:30'],
];

var customColumn = {
    // Methods
    closeEditor : function(cell, save) {
        var value = cell.children[0].value;
        cell.innerHTML = value;
        return value;
    },
    openEditor : function(cell) {
        // Create input
        var element = document.createElement('input');
        element.value = cell.innerHTML;
        // Update cell
        cell.classList.add('editor');
        cell.innerHTML = '';
        cell.appendChild(element);
        $(element).clockpicker({
            afterHide:function() {
                setTimeout(function() {
                    // To avoid double call
                    if (cell.children[0]) {
                        myTable.closeEditor(cell, true);
                    }
                });
            }
        });
        // Focus on the element
        element.focus();
    },
    getValue : function(cell) {
        return cell.innerHTML;
    },
    setValue : function(cell, value) {
        cell.innerHTML = value;
    }
}

myTable = jexcel(document.getElementById('custom'), {
    data:data2,
    columns: [
        { type: 'text', title:'Course Title', width:300 },
        { type: 'text', title:'Time', width:100, editor:customColumn },
     ]
});
</script>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59878034

复制

相似问题

问jexcel仅将下拉列表添加到一行
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jexcel仅将下拉列表添加到一行EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jexcel仅将下拉列表添加到一行
EN