jQuery之miniUI本地部署

jQuery之miniUI本地部署

很多人在官网上下载jQuery miniUI后,在进行本地部署的时候,常常遇到一些问题:
1、本地端demo表格内容无法显示,连接数据库失败?
这是因为部分文件配置不对导致,根据官方发布的部署文件,先进行数据库配置,小编这里使用的数据库是MySQL8.0.15,注意到官方给的数据库jar包是mysql-connector-java-3.1.11-bin.jar,所以要先替换一下连接数据库的jar文件,可以到MySQL安装目录MySQL\Connector J 8.0中找到相关jar包。其次,要更改项目文件中SqlHelper.java中的相关数据库配置。如下图:
更改数据库配置
其中黄色信息driver需要更改为com.mysql.cj.jdbc.Driver这是因为MySQL8.0之后的driver库名发生了改变;其次,数据库的URL中需要加入serverTimezone=UTC,否则也会报错,其他一些端口名称之类的信息,按照实际填写即可。此时,数据库就可以成功连接了!
2、本地端demo表格内容显示不正常,姓名列显示为学历信息?
经过小编的调试,发现miniUI应该是通过某些方法将原来的数据库表格信息重新进行映射(如表达不对,请于批评!),在读取表信息时,不知道是官方故意写错还是怎么滴,读错了属性信息,需要将SqlHelper.java中207行代码改为rowData.put(md.getColumnLabel(i), v);(原代码为rowData.put(md.getColumnName(i), v))才能正常读取信息。具体如图:
更改代码
3、本地端demo图表内容显示不正常,无法显示?
经过小编调试,发现在选择图表相关demo时,项目会调用一些js文件,如图:更改JS文件路径但是细心地小编发现在文件路径下,并没有相关的js文件,后来查询到官方错把这些js文件放置在了WebContent\res\third-party下面,于是乎小编灵机一动,把third-party文件夹名称更改为thirdparty并放置在WebContent\script文件夹下。此时,图表信息就能正常显示啦!
到此为止,jQuery miniUI就已经配置好了!以上有什么不足之处,请大家多多指点,感谢!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 jQuery MiniUI 实现 mini-combox 跨页多选,可以按照以下步骤进行: 1. 引入 jQueryMiniUI 的相关文件: ```html <script src="jquery.min.js"></script> <script src="miniui/miniui.js"></script> <link href="miniui/themes/default/miniui.css" rel="stylesheet" /> <link href="miniui/themes/icons.css" rel="stylesheet" /> ``` 2. 创建 mini-combox 组件并设置相关属性: ```html <input id="myCombox" name="myCombox" class="mini-combobox" value="" showNullItem="true" popupWidth="250" onvaluechanged="onValueChanged" /> ``` 其中,`onvaluechanged` 属性绑定了一个回调函数,用于在用户选择选项后更新选择结果。 3. 在 JavaScript 中初始化 mini-combox 组件并设置数据源: ```javascript $(function() { var myCombox = mini.get("myCombox"); myCombox.setData([{ id: 1, text: "选项1" }, { id: 2, text: "选项2" }, { id: 3, text: "选项3" }, { id: 4, text: "选项4" }, { id: 5, text: "选项5" }, { id: 6, text: "选项6" }, { id: 7, text: "选项7" }, { id: 8, text: "选项8" }, { id: 9, text: "选项9" }, { id: 10, text: "选项10" }]); }); ``` 其中,`setData` 方法用于设置 mini-combox 的数据源。 4. 实现多页加载和多选功能: ```javascript var pageSize = 5; // 每页显示的选项数 var selectedItems = []; // 保存用户选择的选项 function onValueChanged(e) { // 当用户选择一个选项时触发 var item = e.selected; if (item) { // 如果选项还没有被选择过,则添加到选择结果列表中 if ($.inArray(item.id, selectedItems) == -1) { selectedItems.push(item.id); } } else { // 如果选项已经被选择过,则从选择结果列表中移除 var index = $.inArray(e.value, selectedItems); if (index >= 0) { selectedItems.splice(index, 1); } } } function loadPage(pageIndex) { // 加载指定页的选项并更新 mini-combox 的数据源 var start = pageIndex * pageSize; var end = start + pageSize; var data = [{ id: -1, text: "全部" }].concat(selectedItems.map(function(id) { return { id: id, text: "选项" + id }; })).concat(myData.slice(start, end)); var myCombox = mini.get("myCombox"); myCombox.setData(data); } $(function() { var myData = [{ id: 1, text: "选项1" }, { id: 2, text: "选项2" }, { id: 3, text: "选项3" }, { id: 4, text: "选项4" }, { id: 5, text: "选项5" }, { id: 6, text: "选项6" }, { id: 7, text: "选项7" }, { id: 8, text: "选项8" }, { id: 9, text: "选项9" }, { id: 10, text: "选项10" }]; // 初始化 mini-combox 组件 var myCombox = mini.get("myCombox"); myCombox.set({ pageSize: pageSize, onbeforeload: function(e) { var pageIndex = e.pageIndex; loadPage(pageIndex); e.cancel = true; // 取消默认的数据加载方式 } }); loadPage(0); }); ``` 其中,`loadPage` 方法用于加载指定页的选项并更新 mini-combox 的数据源。`selectedItems` 数组保存用户选择的选项,其中的元素为选项的 ID。在 `onValueChanged` 回调函数中,每当用户选择或取消一个选项时,都会更新 `selectedItems` 数组,并调用 `loadPage` 方法重新加载 mini-combox 的数据源。同时,为了实现多选功能,需要在每个选项前面添加一个复选框,并在选择结果列表中保存用户选择的所有选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值