php - js树中如何排列前缀编号?
问题描述
我正在使用 PHP 创建 js 树来显示文件夹和子文件夹名称,如下面的输出,我的问题是如何使前缀号可以在 js 树中显示:
下面是我的编码:
<?php
$folderData = mysqli_query($mysql_con,"SELECT * FROM folder_category where status=1");
$folders_arr = array();
while($row = mysqli_fetch_assoc($folderData)){
$parentid = $row['parentid'];
if($parentid == '0') $parentid = "#";
$selected = false;$opened = false;
if($row['id'] == 2){
$selected = true;$opened = true;
}
$folders_arr[] = array(
"id" => $row['id'],
"parent" => $parentid,
"text" => $row['name'] . ' ' . "<span id='category'>". $row['category']."</span>",
"state" => array("selected" => $selected,"opened"=>$opened)
);
}
?>
<!-- Initialize jsTree -->
<div id="folder_jstree" title="JTM"></div>
<!-- Store folder list in JSON format -->
<textarea style="" id='txt_folderjsondata'><?= json_encode($folders_arr) ?></textarea>
<script style="text/javascript">
$(document).ready(function(){
var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());
$('#folder_jstree').jstree({ 'core' : {
'data' : folder_jsondata,
'multiple': false
} });
var getColor = function (i) {
if (i >= 100 && i <= 199) { return "blue"; }
else if (i >= 200 && i <= 299) { return "red"; }
else if (i >= 300 && i <= 399) { return "yellow"; }
else if (i >= 400 && i <= 499) { return "purple"; }
else if (i >= 500 && i <= 599) { return "green"; }
else { return "#000"; }
}
var colorNodes = function(nodelist){
var tree = $('#folder_jstree').jstree(true);
nodelist.forEach(function (n) {
tree.get_node(n.id).a_attr.style = "color:" + getColor(parseInt(n.text.substr(0,3),10));
tree.redraw_node(n.id); //Redraw tree
colorNodes(n.children); //Update leaf nodes
});
}
$('#folder_jstree').bind('load_node.jstree', function (e, data) {
var tree = $('#folder_jstree').jstree(true);
colorNodes(tree.get_json());
});
});
$( function() {
$( document ).tooltip();
} );
</script>
其实我想要的输出和样图下面一样,样图下面不是用编码来制作的,只是我用画图软件编辑,方便大家理解我想要得到的输出:
json_encode($folders_arr) 的结果如下:
[{"id":"1","parent":"#","text":"100 Pentadbiran <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"2","parent":"#","text":"200 Pengurusan Tanah & Bangunan <span id='category'>JTM<\/span>","state":{"selected":true,"opened":true}},{"id":"3","parent":"#","text":"300 Pengurusan Aset <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"4","parent":"#","text":"400 Pengurusan Kewangan <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"5","parent":"#","text":"500 Pengurusan Sumber Manusia <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"6","parent":"1","text":"100-1 Perundangan <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"7","parent":"1","text":"100-2 Perhubungan Awam <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"8","parent":"6","text":"100-1-1 Penggubalan-Penyediaan-Pindaan Undang-Undang-Peraturan <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"9","parent":"6","text":"100-1-2 Khidmat Nasihat <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"10","parent":"8","text":"100-1-1-1 Undang-Undang Kecil Kerja Di Jalan 1996 <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"11","parent":"8","text":"100-1-1-2 Undang-Undang Kecil Peruntukan Mengenai Lesen Bersesama (Majlis Perbandaran) <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"12","parent":"8","text":"100-1-1-3 Undang-Undang Kecil Mengkompaun Kesalahan-Kesalahan (Majlis Perbandaran Klang), Jalan Parit dan <span id='category'>JTM (Berhubung Kod 100-1\/1\/2)<\/span>","state":{"selected":false,"opened":false}},{"id":"13","parent":"9","text":"100-1-2-1 Jabatan Penguatkuasaan <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"14","parent":"9","text":"100-1-2-2 Jabatan Bangunan <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"15","parent":"7","text":"100-2-1 Publisiti, Promosi Dan Protokol <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"16","parent":"15","text":"100-2-1-1 Publisiti Dan Kenyataan Media <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"228","parent":"#","text":"101 Pentadbiran <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"231","parent":"#","text":"102 Pentadbiran <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"232","parent":"#","text":"301 Pengurusan Aset <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"233","parent":"#","text":"201 Pengurusan Tanah & Bangunan <span id='category'>JTM<\/span>","state":{"selected":false,"opened":false}},{"id":"234","parent":"#","text":"501 Pengurusan Sumber Manusia <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}},{"id":"235","parent":"#","text":"401 Pengurusan Kewangan <span id='category'>JKP<\/span>","state":{"selected":false,"opened":false}}]
解决方案
jsTree 排序插件应该在这种情况下工作,您将需要一个自定义排序比较器功能,尽管默认功能会进行简单的字符串比较。
$('#folder_jstree').jstree({
'core': {
'data': folder_jsondata,
'multiple': false
},
'plugins': ['sort'],
'sort': function (a, b) {
return this.get_text(a).localeCompare(this.get_text(b), 'en', { numeric: true });
}
});
这是基于您的 jsFiddle的更新示例
推荐阅读
- regex - 从字符串文件中删除等号及其后面的数字和 + 号
- microsoft-teams - 如何在 Microsoft Teams 中设置提醒?
- java - 无法从文件中获取与代码中的字符串匹配的行
- lua - Lua 字符间距完美
- swift - CoreData与CloudKit同步时将图像保存到CoreData?
- laravel - 如何在 Laravel 请求中验证选择
- javascript - 如何禁用 UWP 应用程序的高对比度模式
- php - 超时 504 网关超时 nginx 在 wordpress-php-fpm
- daml - 一方作为合同的“见证人”是什么意思,其含义是什么?
- ios - 将 popOverViewController 调整为 label.text 的大小