springboot+thyleaf+动态大屏

框架有点老，

要做动态大屏，用动态加载模块的页面做。因为片段的模块可能会在大屏当中多次使用，所以想把片段模块写成动态的

主页面：

    <div class="app-content content container-fluid lg gridster" style="height: 100%; margin: 0px; padding: 0px;">
		<ul id="gridsterUl">
			<li data-row="1" data-col="12" data-sizex="12" data-sizey="1" class="gs_w">
                <!-- 片段的模块 -->
				<div th:replace="~{screen2025/fragments/title :: fragmentTitle('a1',true)}"></div>
			</li>
			<li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_w">222</li>
			
		</ul>
	</div>


<script type="text/javascript" src=/dsmorse-gridster.js-v0.7.0/jquery.dsmorse-gridster.js charset="utf-8"></script>
	<script type="text/javascript">
	 var gridster;
	 $(function(){
	    gridster = $(".gridster > ul").gridster({
	        widget_margins: [0, 0],
	        widget_base_dimensions: [100, 100],
	        autogenerate_stylesheet: true,
            min_cols: 1,
            max_cols: 12,
            resize: {
                enabled: true
            }
	    }).data('gridster');
	    $('#gridsterUl').resize(function () {
//			gridster.resize();
		});
	  });
</script>

 片段页：

<div class="title" th:fragment="fragmentTitle(id,editable)">
    <div th:if="${editable}" class="editIcon" >
		<a href="javascript:void(0);" onclick="editTitle()"><i class="fa-solid fa-pencil"></i></a>
	</div>
    <div th:id="titleModal_+${id}">----模块中的内容-----</div>
 <!-- onclick 动态方法 -->
<button type="button" class="btn btn-secondary" th:attr="onclick=|init_${id}()|">Close</button>

<script th:inline="javascript">
/*function init_[[${id}]]]()
会显示为
function closeModal_"a1"(),
不能用，最终采取了下面的方法。*/
// 使用变量动态创建函数
window['init_' + [[${id}]]] = function() {
    $('#titleModal_'+ [[${id}]]).show();
};

</script>
</div>