gpt4 book ai didi

javascript - jQuery Easy UI + treegrid + 复选框

转载 作者:行者123 更新时间:2023-11-30 13:13:58 25 4
gpt4 key购买 nike

我在我的网站上使用“jQuery Easy UI”。我需要一个页面中的树状网格,每一行都有复选框(与“jQuery Easy UI”-tree provedes 相同的方式)。

jQuery Easy UI tree with checkbox screen-shot

我需要同一棵树在 treegrid 小部件中与网格一起出现,而不是

jQuery Easy UI treegrid screen-shot

欢迎提出任何建议....

谢谢....

最佳答案

添加以下代码以将复选框列添加到您的树形表中

$(function() {

columns:[[
{field:'code',title:'Code',width:100,align:'left'},
{field:'name',title:'Name',width:100,align:'right'},
{field:'addr',title:'choose',width:80},
{field:'col4',title:'col4',width: 100,
editor: {
type: 'checkbox',
options: {on: '1', off: '0'}
},
formatter: function (value, row) {
if (! row.leaf) {
if (value == 1) {
return '<img src="../resources/image/checked.jpg"/>';
} else {
return '<img src="../resources/image/unchecked.jpg"/>';
}
} else {
return'';
}
}
}
]],

//Edit the end of the line,
// use click event first perform onAfterEdit event before the event trigger
onClickRow: function (row) {
var rowIndex = row.id;
if (lastIndex != rowIndex) {
$('#tablegridJS').treegrid('endEdit', lastIndex);
}
},
//Line editing,
//use double-click event
onDblClickRow: function (row) {
var rowIndex = row.id;
if (lastIndex != rowIndex) {
$('#tablegridJS').treegrid('endEdit', lastIndex);
$('#tablegridJS').treegrid('beginEdit', rowIndex);
lastIndex = rowIndex;
}
},

OnBeforeEdit: function (row) {
console.log(row);
beforEditRow(row); // Here are the main steps and code functions
},

OnAfterEdit: function (row, changes) {
console.log(change);
var rowId = row.id;
$.ajax ({
url: "saveProductConfig.action",
data: row,
success: function (text) {
$.Messager.alert ('message', 'text', 'info');
}
});
},
onClickCell: function(field, row) {
if(field=='col4'){
var rowIndex = row.id;
if (lastIndex != rowIndex) {
$('#tablegridJS').treegrid('endEdit', lastIndex);
$('#tablegridJS').treegrid('beginEdit', rowIndex);
console.log($('#tablegridJS').treegrid('options'));
options = $('#tablegridJS').treegrid('getEditor',{
index:row.id, // pass the editing row id, defined via 'idField' property
field:'col4'
});
//console.log($(options.target).attr('checked',true));
console.log(options.target);
if(options.oldHtml=='<img src="../resources/image/unchecked.jpg">'){
$(options.target).attr('checked',true);
}else if(options.oldHtml=='<img src="../resources/image/checked.jpg">'){
$(options.target).attr('checked',false);
}
lastIndex = rowIndex;
}
}
}
});

function beforEditRow (row) { // This is the core, very useful if the same needs, then you can learn to achieve
//check box
var libraryCoclum = $('#tablegridJS').treegrid('getColumnOption', 'col4');


//checkbox object
var checkboxOptionsObj = new Object ();
checkboxOptionsObj.on = '1 ';
checkboxOptionsObj.off = '0 ';
//add checkbox object on edit
var checkboxEditorObj = new Object ();
checkboxEditorObj.type = 'checkbox';
checkboxEditorObj.options = checkboxOptionsObj;


//ckeck whether to make checkbox or combo box editable
if (row.leaf) {
libraryCoclum.editor = null;
typeCoclum.editor = comboboxEditorObj;
} else {
libraryCoclum.editor = checkboxEditorObj;
typeCoclum.editor = null;
}
}
$("#bteasyui").click(function(){
var dataSelected = "";
//$("#tablegridJS").treegrid('selectAll');
nodes = $("#tablegridJS").treegrid('getSelection');
console.log(nodes);

$('#tablegridJS').treegrid('beginEdit', nodes.id);

dataSelected = $("#tablegridJS").treegrid("check",'01');
console.log($("#tablegridJS").treegrid('getChecked'));

});
});

关于javascript - jQuery Easy UI + treegrid + 复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12835611/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com