在django3.1的admin中加入jQuery单选下拉树dropdown Combo tree Select widget

首先感谢 早晨阳光一般暖 （https://blog.csdn.net/LZY_1993）分享了这么棒的组件代码，才让我们这些伸手党可以只做自己最拿手的事儿。哈哈

https://blog.csdn.net/LZY_1993/article/details/107854344
http://wsitm.gitee.io/web_test/view/TestSelectZTree.html

======================================================

我们遇到的需求中有一个字段要从近两千行分层数据中选择底级数据，在主界面用React+（Antd TreeSelect）+Django-Rest的组合解决非常简单，支持的特性也很丰富。

https://ant.design/components/tree-select-cn/

唯一不足的是不支持XP下chrome最高的49.0.2623.112版本。于是想只用django3.1的admin提供一个极简的修改入口，但是在网上搜来搜去，居然没找到一篇讲django admin中如何支持下拉树型组件的文章。

网上高手们提供的下拉树型组件很多，但是没有django admin可以直接用的。如果脱离admin，或前后端分离的解决方案又不符合自己的初衷。

我们知道django3.1中admin的autocomplete特性可以生成一个Select2下拉组件，可以搜索但是不支持树型结构，选项不能按层级折叠，选项太多就不好用了

https://dev.to/connorbode/builtin-select2-widget-in-django-admin-3ip

在网上找到了最接近这个需求的项目是django-treewidget，pip只能安装组件，而Github中下载的源码包含一个exampleapp可以用来直观感受一下

https://github.com/netzkolchose/django-treewidget

试用后就会发现django-treewidget基于jstree实现了丰富的树型结构特性，但是不支持下拉，树组件直接显示在主界面上，随着展开或折叠自动变更组件高度。

临时应对可以通过CSS限制高度，并加入overflow: auto支持滚动条就勉强能用了

/*Lib\site-packages\treewidget\static\treewidget\default.css*/
.treewidget {
    border: 1px solid #ddd;
    border-radius: 5px;
    min-height: 24px;
    overflow: auto;
    max-height: 120px;
}

问题在于用到inline页面时行高过大，max-height高度设定太小又影响树的可操作性。

对前端javascript高手来说，可能随手就能将其加入下拉组件中，但是在网上没找到相关文章，自己修改javascript实现又没达到那种水平。

我们只能硬着头皮试着将网上找来的jQuery下拉树组件整合进django admin了。

总结需求如下：

必需的特性
一、支持XP下chrome最高的49.0.2623.112版本
二、要支持inline admin中多个实例的状态，并且能保存（废话）
三、初始状态可自定义折叠，除了第一级展开外，其余层折叠，否则太长了，没有树的意义了
四、末级才可选，非末级点击或双击只能展开或折叠
五、初始状态从数据库取出的当前字段值要能显示在未下拉时的组件框中
六、placeholder的行inline admin保存时也要视为空值，不会保存无意义的行
七、不能与django中的autocomplete（Select2）、django-treewidget（jstree）、django.jQuery有冲突
八、不能和optgroup一样耍流氓仅支持两个层级

非必需的特性
一、支持搜索，搜索结果，展开其所在的所有上级节点以显示层级关系
二、选项值多来源支持(1)options(2)java Array(3)json(4)django model(5)ajax
三、初始状态从数据库取出的当前字段值在下拉树中也被选中，展开其所在的所有上级节点，
    并且滚动定位到可见区域（django-treewidget中已实现）
四、点击下拉框以外自动退出，而不是必须选一个选项或点击下拉按钮所在的Select框才退出
五、两千条下的组件性能，不应该有用户可感觉的延迟
六、风格与django admin的Select组件类似

一、组件的选择

一、https://github.com/charljmert/select2gtree
不算是树，类似https://ant.design/components/cascader-cn/，但是下拉后不向右扩展，提供了一个回
退按钮，不符合用户操作习惯，并且当前选项不易定位，放弃

二、https://github.com/maliming/select2-treeview
在cn.bing.com国际版搜索django select2 tree跳出来的第一个Stack Overflow网页
https://stackoverflow.com/questions/56128355/how-to-display-a-tree-in-select2
中推荐的No.2，看了一下example.png，应该是只支持两层，放弃

三、https://github.com/erhanfirat/combo-tree
Demo演示地址https://www.jqueryscript.net/demo/Drop-Down-Combo-Tree/
介绍https://www.jqueryscript.net/form/Drop-Down-Combo-Tree.html
看Demo发现是初始全展开，设置json数据结构太简单，只有id, title, subs，想当然认为不能自定义折叠，
放弃

四、https://github.com/patosai/tree-multiselect.js
Demo演示地址https://patosai.com/tree-multiselect
看Demo发现也是初始全展开，配置参数中collapsible按字面理解是设置可展开节点而不是初始折叠状态，高
度怀疑不能自定义折叠，而且为什么有这么多文件，要自己编译么？放弃

五、https://github.com/clivezhg/select2-to-tree
在cn.bing.com国际版搜索django select2 tree跳出来的第一个Stack Overflow网页中推荐的No.1，终于
是初始折叠第二层级的了，也可以指定非末级节点只能展开不能选择（见Example 3），但有明显的缺陷&