Select entire Handsontable column with icon click? [选择图标点击整个handsontable柱？] - 问题-字节技术
Select entire Handsontable column with icon click?
选择图标点击整个handsontable柱？
问题 (Question)
I want each column in my table to have an icon that when clicked, will select the entire column. I have this working for the first (not fixed) column with a button, but cannot get the
for each icon working. Also, any idea why the last column (2018) has more width and the horizontal scroll never seems to meet the end? Thanks in advance.
container.handsontable("loadData", getData());
$("button#selectFirst").on('click', function () {
//container.handsontable("selectCell", 0, 4)
container.handsontable("selectCell", 0, 4, 5, 4)
我想每一列在我的桌上有一个图标，当点击时，将选择整个列。我这一工作（不固定）与一个按钮列，但不能得到每个图标的工作。同时，知道为什么最后一列（2018）具有更大的宽度和水平滚动似乎永不满足的终结？先谢谢了。jQuerycontainer.handsontable("loadData", getData());
$("button#selectFirst").on('click', function () {
//container.handsontable("selectCell", 0, 4)
container.handsontable("selectCell", 0, 4, 5, 4)
最佳答案 (Best Answer)
you need to add a custom renderer for the arrow like this
var myRendererArrow = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.cellTypes.checkbox.renderer.apply(this, arguments);
$(td).empty().append("&span class='sm-moon delBlue icon-right-arrow-17' data-icon=''&O&/span&");
in the afterRender callback you need to add this code
afterRender:function(){
$('input[type=checkbox]').uniform();
$('.checkall').on('click', function () {
$(this).closest('table').find('input.htCheckboxRendererInput').prop("checked",this.checked);
$.uniform.update();//update UniformJS
//select clicked column
$(".icon-down-arrow-17").on("click",function(){
var col=$(this).closest("th").index();
container.handsontable("selectCell", 0, col, 5, col);
//select row only change th for tr and the column on selectCell
$(".icon-right-arrow-17").on("click",function(){
var row=$(this).closest("tr").index();
container.handsontable("selectCell", row, 0, row, 13,false);//false prevent scroll
to only change the background color if a value has been changed you can use the changes object inside afterChange
$('#example1').handsontable('getInstance').addHook('afterChange', function(changes) {
$.each(changes, function (index, element) {
if(element[2]!=element[3]){
//if the original value is not equal to the actual
$(ele.getCell(element[0],ele.propToCol(element[1])))
.addClass('changeInput').data("change",true);
你需要添加一个箭头这样的自定义渲染var myRendererArrow = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.cellTypes.checkbox.renderer.apply(this, arguments);
$(td).empty().append("&span class='sm-moon delBlue icon-right-arrow-17' data-icon=''&O&/span&");
在afterrender回调你需要添加代码afterRender:function(){
$('input[type=checkbox]').uniform();
$('.checkall').on('click', function () {
$(this).closest('table').find('input.htCheckboxRendererInput').prop("checked",this.checked);
$.uniform.update();//update UniformJS
//select clicked column
$(".icon-down-arrow-17").on("click",function(){
var col=$(this).closest("th").index();
container.handsontable("selectCell", 0, col, 5, col);
//select row only change th for tr and the column on selectCell
$(".icon-right-arrow-17").on("click",function(){
var row=$(this).closest("tr").index();
container.handsontable("selectCell", row, 0, row, 13,false);//false prevent scroll
如果一个值已经改变，你可以使用改变对象的内部afterchange只改变背景颜色$('#example1').handsontable('getInstance').addHook('afterChange', function(changes) {
$.each(changes, function (index, element) {
if(element[2]!=element[3]){
//if the original value is not equal to the actual
$(ele.getCell(element[0],ele.propToCol(element[1])))
.addClass('changeInput').data("change",true);如何添加在Handsontable一个复选框列_百度知道
如何添加在Handsontable一个复选框列
提问者采纳
Netrowk），则可直接使用该帐户，并选择(登入PlayStation®或个人电脑的PlayStation®Store）享受线上购物，遵循画面指示，可能需先更新系统软件。提示若已在PS3&#8482。新建PlayStation®Network帐户;Network）;Network的帐户后。请进入（PlayStation®Store建立PlayStation&#174，可前往（PlayStation&#174，建立帐户若要使用此机能
其他类似问题
为您推荐：
复选框的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁Bootstrap（6）
最近在项目开发上遇到一个需要开关的地方，后来找了下angular-switch.js发觉样例太少，而且还需要翻墙去找，对于我这种英文菜鸟来说太麻烦了，所以选了个bootstrap-switch.js插件，发觉效果还可以。下面简单介绍下bootstrap-switch的使用。
需导入的文件
&script type=&text/javascript& src=&&%=request.getContextPath()%&/js/bootstrap-switch-master/dist/js/bootstrap-switch.min.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&&%=request.getContextPath()%&/js/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.min.css& /&
&pre name=&code& class=&html&&&link rel=&stylesheet& type=&text/css& href=&&%=request.getContextPath()%&/js/bootstrap-switch-master/docs/js/jquery.min.js& /&
bootstrap文件可以到这里去下载：
&input name=&status& type=&checkbox& data-size=&small&&
通过js来实现开关的初始化
$('[name=&status&]').bootstrapSwitch({
onText:&启动&,
offText:&停止&,
onColor:&success&,
offColor:&info&,
size:&small&,
onSwitchChange:function(event,state){
if(state==true){
$(this).val(&1&);
$(this).val(&2&);
当然也可以直接将属性写在html中，下面罗列bootstrap-switch的属性及应用
bootstrap-switch属性
html属性名
取值范围
默认值
true、false
null、mini、small、normal、large
data-animate
true、false
ture、false
开关状态只读，不能修改
true、false
indeterminate
data-indeterminate
true、false
data-inverse
颠倒开关顺序
true、false
radioAllOff
data-radio-all-off
允许单选按钮被用户取消选中
true、false
data-on-color
左侧开关颜色
primary、info、success、warning、danger、default
data-off-color
右侧开关颜色
primary、info、success、warning、danger、default
data-on-text
左侧开关显示文本
data-off-text
右侧开关显示文本
data-label-text
开关中间显示文本
handleWidth
data-handle-width
String|Number
开关左右2侧的宽度
String|Number
labelWidth
data-label-width
String|Number
开关中间的宽度
String|Number
data-base-class
开关基础样式
bootstrap-switch
wrapperClass
data-wrapper-class
String | Array
元素样式容器
String | Array
初始化开关
function（event，state）｛｝
onSwitchChange
当开关状态改变时触发
function（event，state）｛｝
覆盖全局默认值：
$.fn.bootstrapSwitch.defaults.size = 'large';
$.fn.bootstrapSwitch.defaults.onColor = 'success';
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：25191次
积分：2169
积分：2169
排名：第10463名
原创：198篇
(3)(10)(11)(7)(19)(10)(21)(13)(11)(17)(14)(6)(11)(1)(7)(18)(28)How to add default value to checkbox in Handson Table? [如何在下面的表复选框添加默认值？] - 问题-字节技术
How to add default value to checkbox in Handson Table?
如何在下面的表复选框添加默认值？
问题 (Question)
How to set the default value as checked only for a new row in an Handson table?
In this following link how to set column "C" checked = true as default only for new rows.
Any idea ?
$(document).ready(function () {
var data = [
{id: 1, name: "Ted", isActive: true, color: "orange", date: ""},
{id: 2, name: "John", isActive: false, color: "black", date: null},
{id: 3, name: "Al", isActive: true, color: "red", date: null},
{id: 4, name: "Ben", isActive: false, color: "blue", date: null}
var yellowRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.TextCell.renderer.apply(this, arguments);
$(td).css({
background: 'yellow'
var greenRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.TextCell.renderer.apply(this, arguments);
$(td).css({
background: 'green'
var $container = $("#example1");
$container.handsontable({
data: data,
startRows: 5,
colHeaders: true,
minSpareRows: 1,
columns: [
{data: "id", type: 'text'},
//'text' is default, you don't actually have to declare it
{data: "name", type: {renderer: yellowRenderer}},
{data: "isActive", type: 'checkbox'},
{data: "date", type: 'date'},
{data: "color",
type: 'autocomplete',
source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
cells: function (row, col, prop) {
if (row === 0 && col === 0) {
this.renderer = greenR
function bindDumpButton() {
$('body').on('click', 'button[name=dump]', function () {
var dump = $(this).data('dump');
var $container = $(dump);
console.log('data of ' + dump, $container.handsontable('getData'));
bindDumpButton();
如何设置默认值只检查在下面的表新的一行吗？在下面这个链接如何设置列的“C”选中真的只对新的行的默认。任何想法？$(document).ready(function () {
var data = [
{id: 1, name: "Ted", isActive: true, color: "orange", date: ""},
{id: 2, name: "John", isActive: false, color: "black", date: null},
{id: 3, name: "Al", isActive: true, color: "red", date: null},
{id: 4, name: "Ben", isActive: false, color: "blue", date: null}
var yellowRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.TextCell.renderer.apply(this, arguments);
$(td).css({
background: 'yellow'
var greenRenderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.TextCell.renderer.apply(this, arguments);
$(td).css({
background: 'green'
var $container = $("#example1");
$container.handsontable({
data: data,
startRows: 5,
colHeaders: true,
minSpareRows: 1,
columns: [
{data: "id", type: 'text'},
//'text' is default, you don't actually have to declare it
{data: "name", type: {renderer: yellowRenderer}},
{data: "isActive", type: 'checkbox'},
{data: "date", type: 'date'},
{data: "color",
type: 'autocomplete',
source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
cells: function (row, col, prop) {
if (row === 0 && col === 0) {
this.renderer = greenR
function bindDumpButton() {
$('body').on('click', 'button[name=dump]', function () {
var dump = $(this).data('dump');
var $container = $(dump);
console.log('data of ' + dump, $container.handsontable('getData'));
bindDumpButton();
最佳答案 (Best Answer)
I was able to figure out myself
We can set default column values for the newly created row by adding some code to the afterCreateRow callbacks. I did add the following code to the afterCreateRow callback seems to be working fine.
afterCreateRow: function(index) {
if (handsontable != undefined) {
var data = $("#hsTable").data('handsontable').getData();
data[index - 1].(dataSchemaField)=
我能自己解决我们可以设置默认列值为新创建的行添加一些代码到aftercreaterow回调。我将下面的代码添加到aftercreaterow回调似乎是工作的罚款。afterCreateRow: function(index) {
if (handsontable != undefined) {
var data = $("#hsTable").data('handsontable').getData();
data[index - 1].(dataSchemaField)=}