场景描述:弹窗,显示树形结构,节点层次可变(可只有一级节点,也可是多级节点),限制只能选择一个节点!

1、修改jquery.tree-multiselect.min.js 文件

2、前台页面

参考代码:

<!--耗材分类弹出框-->
<div class='popupWindow' id="itemTypeView">
<ul>
<li class="popupWindow-header">
<div class="titleName" id="titleName">@T("Consumable_type")</div>
<div class="close">×</div>
</li>
<li>
<div class="popupWindow-content">
<div class="form-group col-xs-12 popupWindow-tree" style="overflow-y: auto;overflow-x: hidden;max-height: 410px;">
<select id="test-select" multiple="multiple" class="treeCheckbox"></select>
</div>
</div>
</li>
<li>
<div class="popupWindow-footer">
<button type="button" class="btn btn-primary" onclick="buttonLoading(this)" autocomplete="off" id="btn_save" data-bind="click:saveItemTypeClick">@T("op_save")</button>
<button type="button" class="btn btn-default" id="btn_cancel" data-bind="click:closeItemTypeClick">@T("op_cancel")</button>
</div>
</li>
</ul>
</div>

3、调用

参考代码:

    //选择耗材分类
this.selectItemType = function () {
//初始化树
var $select = $('#test-select');
var div = $select.parent();
var param = {
itemtypecode: self.form.itemtypecode()
}
$.ajax({
type: "POST",
url: self.urls.getitemtype,
data: { data: JSON.stringify(ko.toJS(param)) },
beforeSend: function () {
showLoading();
},
success: function (d) {
if (d.result == "error") {
console.log(d.message);
$(div).html(com.getLocalization(self.sourceName, "Data loading failure."));
} else {
$select.html("");
$(div).html("").append($select);
var treeData = com.parseJson(d);
for (var i = 0; i < treeData.length; i++) {
var treenode = treeData[i];
var $option = $('<option value="' + treenode.treeNodecode + '" data-parent-code="' + treenode.treeNodeParentPathCode + '" data-section="' + treenode.treeNodeParentPathText + '" class="float-left" ' + ($.trim(treenode.checkState) == "" ? '' : 'selected="' + treenode.checkState + '"') + '>' + treenode.treeNodetext + '</option>');
if (treenode.treeNodeParentPathCode == "0") {
$option = $('<option value="' + treenode.treeNodecode + '" data-parent-code="' + treenode.treeNodeParentPathCode + '" data-section="' + treenode.treeNodetext + '" class="float-left" ' + ($.trim(treenode.checkState) == "" ? '' : 'selected="' + treenode.checkState + '"') + '></option>');
}
$(div).find('#test-select').append($option);
}
var treeObject = $select.treeMultiselect({ enableSelectAll: false, sortable: true, searchable: true, onChange: treeChange })[0];
$('#test-select').closest('.popupWindow').css('top', ($(window).height() - $('#test-select').closest('.popupWindow').height()) / 2 + "px");
function treeChange(options, add, remove) {
if (add.length > 0) {
$.each($("#test-select option"), function (i, e) {
if (e.value != add[0].value) {
//去掉树节点的勾选项
treeObject.removeItem($(e).attr("data-key"));
}
})
}
}
}
},
error: function (d) {
NotifyDanger(d.message);
},
complete: function () {
hideLoading();//关闭特效
}
});
showNormalWindow('itemTypeView');
}
//保存耗材分类
this.saveItemTypeClick = function () { ///获取选择的药效分类信息
var itemtypenames = "", itemtypecodes = "";
var count = parent.$("#test-select option").length;
$.each(parent.$("#test-select").get(0).options, function (i, e) {
if (e.text != "") {//子节点
itemtypenames += e.innerHTML + ",";
itemtypecodes += e.value + '_0' + ",";
} else {
itemtypenames += $(e).attr("data-section") + ",";
itemtypecodes += $(e).attr("value") + '_0' + ",";
}
})
if (self.form.itemtypecode().trim() != "") {
var deleteitemtypecode = $.map(self.form.itemtypecode().split(','), function (e, i) {
var code = e.substring(0, e.length - 2);
if (itemtypecodes.indexOf(code) == -1) {
return code
}
})
$.each(deleteitemtypecode, function (i, e) {
itemtypecodes += e + '_1' + ",";
})
}
self.form.itemtypename(itemtypenames.substring(0, itemtypenames.length - 1));
self.form.itemtypecode(itemtypecodes.substring(0, itemtypecodes.length - 1)); self.closeItemTypeClick();
}
//关闭耗材分类弹窗
this.closeItemTypeClick = function () {
hidePopupWindow('itemTypeView');
}

4、数据转换

 /// <summary>
/// 获取耗材分类
/// </summary>
/// <param name="data"></param>
/// <returns></returns>
[AlwaysAccessible]
public JsonResult GetItemType(string data)
{
var d = JsonConvert.DeserializeObject<dynamic>(data);
string itemtypecode = d.itemtypecode == null ? "" : ((string)d.itemtypecode.ToString()).Trim(); try
{
//当前耗材已经关联的itemtypecode集合
List<string> selectedItemTypeCoce = new List<string>();
if (!string.IsNullOrEmpty(itemtypecode) && itemtypecode != "[]")
{
foreach (string item in itemtypecode.Split(','))
{
if (item.Split('_')[] == "")
{
selectedItemTypeCoce.Add(item.Split('_')[]);
}
}
}
#region 获取树状结构数据
ReturnMsg readData = new DeviceService().sys_query_comn(@"with recursive r(itemtypecode,itemtypename,parentitemtypecode,parentitemtypename) as(
--select itemtypecode,itemtypename,parentitemtypecode::varchar(500),1 as depth from base_itemtype where parentitemtypecode='0' and main.itemtypeclass='1'
select main.itemtypecode,main.itemtypename,main.parentitemtypecode::varchar(500),bi.itemtypename::varchar(500) parentitemtypename from base_itemtype main
left join base_itemtype bi on main.parentitemtypecode=bi.itemtypecode where main.parentitemtypecode='0' and main.itemtypeclass='2' and main.isdelete=0
union ALL
select bi.itemtypecode,bi.itemtypename,case when r.parentitemtypecode='0' then bi.parentitemtypecode::varchar(500) else (r.parentitemtypecode||'✪'||bi.parentitemtypecode)::varchar(500) end , case when r.parentitemtypename is null then bi.parentitemtypename::varchar(500) else (r.parentitemtypename||'✪'||bi.parentitemtypename)::varchar(500) end
from (select main.itemtypecode,main.itemtypename,main.parentitemtypecode,bi.itemtypename parentitemtypename from base_itemtype main
left join base_itemtype bi on bi.itemtypecode=main.parentitemtypecode where main.isdelete=0
) bi,r where bi.parentitemtypecode = r.itemtypecode
)
select * from r
where r.itemtypecode not in (select parentitemtypecode from base_itemtype where isdelete=0)
", , );
#endregion
if (readData.returnlist.Count > )
{
List<Tree> roleTreenodes = new List<Tree>();
foreach (var roleSelected in readData.returnlist)
{
Tree treenode = new Tree();
treenode.treeNodecode = ((HashMap<object, object>)roleSelected)["itemtypecode"] != null ? ((HashMap<object, object>)roleSelected)["itemtypecode"].ToString().Trim() : "";//设备型号编码在树中以“DM^”开头,以区分角色编码
treenode.checkState = (selectedItemTypeCoce.Contains(treenode.treeNodecode) ? "selected" : "");
treenode.treeNodetext = ((HashMap<object, object>)roleSelected)["itemtypename"] != null ? ((HashMap<object, object>)roleSelected)["itemtypename"].ToString().Trim() : "";
treenode.treeNodeParentPathCode = ((HashMap<object, object>)roleSelected)["parentitemtypecode"] != null ? ((HashMap<object, object>)roleSelected)["parentitemtypecode"].ToString().Trim() : "";
treenode.treeNodeParentPathText = ((HashMap<object, object>)roleSelected)["parentitemtypename"] != null ? ((HashMap<object, object>)roleSelected)["parentitemtypename"].ToString().Trim() : "";
roleTreenodes.Add(treenode);
}
//return Json(new { result = "success", data = readData.returnlist }, JsonRequestBehavior.AllowGet);
var jsonArr = JsonConvert.SerializeObject(roleTreenodes);
return Json(jsonArr, JsonRequestBehavior.AllowGet);
}
else
{
return Json(new { result = "error", message = readData.returnmessage.Contains("java.lang") ? T("Api_exception").ToString() : readData.returnmessage }, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
SaveException(new ExceptionMessage() { ex = ex, message = "URL:" + System.Web.HttpContext.Current.Request.Url.ToString() });
return Json(new { result = "error", message = ex.Message }, JsonRequestBehavior.AllowGet);
}
}

treeMultiselect 去掉勾选项的更多相关文章

  1. zTree-已勾选项id传输到action的解决方案

    测试jsp <%@ page language="java" contentType="text/html; charset=utf-8"    page ...

  2. oracle表结构和数据导出时的一些勾选项说明

    使用pl/sql developer导出oracle数据库的表结构和表数据时,有一些勾选项供用户选择,需要用户根据实际情况进行勾选或取消. 导出方法如下:一.只导出表结构1.使用pl/sql deve ...

  3. class7_Checkbutton 勾选项

    最终的运行效果(程序见序号3):   #!/usr/bin/env python# -*- coding:utf-8 -*-# ------------------------------------ ...

  4. android TDD平台插入双卡时,查看允许返回发送报告的选项,去掉勾选,不起作用

    请在MultiSimPreferenceActivity.java 下修改 修改1: 函数 isChecked()     private boolean isChecked(String prefe ...

  5. SDK Manager中勾选项

    运行SDK Manager 勾选对应版本的SDK,从这里基本可以知道一个Android版本对应着一个版本的API. 其中每个包都有这么几个文件: Documentation for Android S ...

  6. jenkins 批量修改 去掉勾选Build whenever a SNAPSHOT dependency is built

    进入jenkins 的jobs的上一层目录 执行 sed -i 's/<ignoreUpstremChanges>false<\/ignoreUpstremChanges>/& ...

  7. winfrom_根据checkbox勾选项增减dgv字段列

    1.效果: 2.点击‘配置’按钮: private void btn_configure_Click(object sender, EventArgs e) { string sum = string ...

  8. solr6.4.1搜索引擎(2)首次同步mysql数据库

    尚未成功启动solr的,请参考我的另一篇文章:http://www.cnblogs.com/zhuwenjoyce/p/6506359.html(solr6.4.1 搜索引擎启动eclipse启动) ...

  9. iDempiere 使用指南 采购入库流程

    Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...

随机推荐

  1. severless扫盲

    最近老是遇到这个话题,抽一点时间系统的学习下,severless是属于云计算部分,但是和前端息息相关(大家都这么说)- serverless是什么? 字面意思是无服务器,亦或是少服务器的.让用户无需关 ...

  2. 微信小程序之网络通信

    关于网络通信,这里我使用的是wx.request,官方代码示例如下: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '', y: ...

  3. if, if/else, if /elif/else,case

    一.if语句用法 if expression then command fi 例子:使用整数比较运算符 read -p "please input a integer:" a if ...

  4. Spark2.x(六十):在Structured Streaming流处理中是如何查找kafka的DataSourceProvider?

    本章节根据源代码分析Spark Structured Streaming(Spark2.4)在进行DataSourceProvider查找的流程,首先,我们看下读取流数据源kafka的代码: Spar ...

  5. redis 使用redis Desktop manger进行远程进行链接

    1.修改redis.conf文件: a.去掉bind:127.0.0.0 b.protected mode 模式改成 no 2.重启redis /etc/init.d/redis restart 3. ...

  6. ROS tf监听编写

    博客转载自:https://www.ncnynl.com/archives/201702/1311.html ROS与C++入门教程-tf-编写tf listener(监听) 说明: 介绍如何使用tf ...

  7. Delphi ADOConnection连接

    unit Unit_DM; interface usesSysUtils, Classes, DB, ADODB,inifiles,windows,forms,controls; typeTDM = ...

  8. 阿里云移动推送 ios项目添加SDK步骤

    添加阿里云Pods仓库和各产品SDK Pod依赖,配置步骤如下: 1. CocoaPods集成添加阿里云Pods仓库,Podfile添加: source 'https://github.com/ali ...

  9. springboot打war包部署到tomcat

    1:build.gradle plugins { id 'org.springframework.boot' version '2.1.5.RELEASE' id 'java' } apply plu ...

  10. objectARX2010及其以上版本使用publish打印(发布)图纸,后台布局打印图纸例子浅析

    AutoCAD 2010版本开始新增了一个发布图纸的功能,可以后台打印图纸,以下是ADN官方博客例子浅析 原文地址 https://adndevblog.typepad.com/autocad/201 ...