Microsoft Dynamics CRM 2013 --选项集的多选

由于从Microsoft Dynamics CRM 2011到Microsoft Dynamics CRM 2013,界面的风格发生了很大的变化

故原先在2011上开发的选项集多选在2013上面已经不再适用.

一直想不明白的是,微软为啥还不支持选项集的多选呢?

折腾的一番,具体效果如下,但还有很多不满意的地方,希望有兴趣的,或者已经做过类似功能的各位,提供下宝贵的意见,不甚感激!

具体使用步骤如下:

1.创建选项集字段,文本型字段各一个

  本文使用的字段名分别为:new_post(选项集),new_post_value(保存多选值的文本型字段)

2.在窗体的OnLoad事件中添加ConvertToMultiPicklist事件,详细代码如下

//表单加载时转化单选为多选
function ConvertToMultiPicklist(entityName, fieldSchema) {

    var picklistValue = $("#" + fieldSchema + "" + "_value" + "").text();

    //step1:通过SOAP获取picklist的value,text列表(返回类型为Object Array,格式为[100000000,测试text])
    var optionSetValueList = GetOptionSet1(entityName, fieldSchema, 2052, false);

    if (optionSetValueList != null && optionSetValueList.length > 0) {

        //step2.1:先清空原先picklist的内容(html)
        $("#" + fieldSchema + "" + "_d" + "").html("");

        //step2.2:开始构建多选所需的html
        var appendHtml = "";
        //border:1px solid #f3f1f2;
        appendHtml += "<div style="padding-top:0px;padding-left:0px;padding-bottom:20px;padding-right:20px; margin-left:15px;">";
        appendHtml += "<ul style="list-style:none;">";

        for (var i = 0; i < optionSetValueList.length; i++) {
            var checkboxId = "cb_" + fieldSchema + "_" + i;
            appendHtml += "<li style="float:left;display:block;padding-left:5px;">";
            appendHtml += "<input type="checkbox" value="" + optionSetValueList[i][0] + "" style="auto;" class="" + fieldSchema + "" id="" + checkboxId + "" ";

            //step2.3:加载已经保存的选项
            if (picklistValue.indexOf(optionSetValueList[i][0] + ":" + optionSetValueList[i][1] + ";") > -1) {
                appendHtml += "checked="checked"";
            }

            appendHtml += "/>";

            appendHtml += "<label for="" + checkboxId + "">" + optionSetValueList[i][1] + "</label>";
            appendHtml += "</li>";
        }

        appendHtml += "</ul>";
        appendHtml += "</div>";

        //step3:用构建好的html替换原先的picklist的html
        $("#" + fieldSchema + "" + "_d" + "").html(appendHtml);

    }
}

与ConvertToMultiPicklist函数相关其他函数如下

function GetOptionSet1(entitySchema, attributeSchema, languageCode, mode) {

    var xmlHttpRequest = RetrieveAttribute(entitySchema, attributeSchema, mode);

    var optionSet = [];
    if (xmlHttpRequest.status == 200) {
        
        //将responseText转为responseXml
        var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
        xmlDoc.async = false;
        xmlDoc.loadXML(xmlHttpRequest.responseText);
        oXml = xmlDoc;

        var optionMetadataNodes = oXml.selectNodes("//c:OptionMetadata");
        for (var i = 0; i < optionMetadataNodes.length; i++) {
            optionSet[i] = [];
            optionSet[i][0] = optionMetadataNodes[i].selectSingleNode("c:Value").text;
            optionSet[i][1] = "";
            var localizedLabelsData = optionMetadataNodes[i].selectSingleNode("c:Label/a:LocalizedLabels");
            for (var j = 0; j < localizedLabelsData.childNodes.length; j++) {
                var localizedLabelData = localizedLabelsData.childNodes[j];
                if (localizedLabelData.selectSingleNode("a:LanguageCode").text == languageCode) {
                    optionSet[i][1] = localizedLabelData.selectSingleNode("a:Label").text;
                }
            }
        }
    }
    else {
        var errorMessage = ParseError(xmlHttpRequest.responseXML);
        alert("获取选项集集合失败,错误信息:" + errorMessage);
    }
    return optionSet;
}

　　

不知啥原因,在调用GetOptionSet1,获取httpXmlRequest.responseXml的时候,一直出现未明的错误..而responseText则是正常的,故上面用的是responseText,然后再把responseText转为responseXml(转换过程中用到了ActiveXObject,所以,以上方法暂时只支持IE)

//内部函数 获取属性MetaData
function RetrieveAttribute(entitySchema, attributeSchema, mode) {
    var request = "<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/"><s:Body>";
    request += "<Execute xmlns="http://schemas.microsoft.com/xrm/2011/Contracts/Services" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">";
    request += "<request i:type="a:RetrieveAttributeRequest" xmlns:a="http://schemas.microsoft.com/xrm/2011/Contracts">";
    request += "<a:Parameters xmlns:b="http://schemas.datacontract.org/2004/07/System.Collections.Generic">";
    request += "<a:KeyValuePairOfstringanyType>";
    request += "<b:key>MetadataId</b:key>";
    request += "<b:value i:type="c:guid" xmlns:c="http://schemas.microsoft.com/2003/10/Serialization/">00000000-0000-0000-0000-000000000000</b:value>";
    request += "</a:KeyValuePairOfstringanyType>";
    request += "<a:KeyValuePairOfstringanyType>";
    request += "<b:key>RetrieveAsIfPublished</b:key>";
    request += "<b:value i:type="c:boolean" xmlns:c="http://www.w3.org/2001/XMLSchema">true</b:value>";
    request += "</a:KeyValuePairOfstringanyType>";
    request += "<a:KeyValuePairOfstringanyType>";
    request += "<b:key>EntityLogicalName</b:key>";
    request += "<b:value i:type="c:string" xmlns:c="http://www.w3.org/2001/XMLSchema">" + entitySchema + "</b:value>";
    request += "</a:KeyValuePairOfstringanyType>";
    request += "<a:KeyValuePairOfstringanyType>";
    request += "<b:key>LogicalName</b:key>";
    request += "<b:value i:type="c:string" xmlns:c="http://www.w3.org/2001/XMLSchema">" + attributeSchema + "</b:value>";
    request += "</a:KeyValuePairOfstringanyType>";
    request += "</a:Parameters>";
    request += "<a:RequestId i:nil="true" />";
    request += "<a:RequestName>RetrieveAttribute</a:RequestName>";
    request += "</request>";
    request += "</Execute>";
    request += "</s:Body></s:Envelope>";

    var serverUrl = this.GetServerUrl();

    var xmlHttpRequest = new XMLHttpRequest();
    xmlHttpRequest.open("POST", serverUrl + "/XRMServices/2011/Organization.svc" + "/web", mode);
    xmlHttpRequest.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/xrm/2011/Contracts/Services/IOrganizationService/Execute");
    xmlHttpRequest.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
    xmlHttpRequest.setRequestHeader("Content-Length", request.length);
    xmlHttpRequest.send(request);

    return xmlHttpRequest;
}

　

相信看到这里,聪明的你已经会有如此的疑问:不过一个小小的功能,为啥要用SOAP的方式去获取选项集的内容?

答案:

其实我也不想的.原先的代码是直接在窗体加载的时候,去获取之前定义好的new_post(选项集)的option,可在做完这个之后,发现,在IE8,IE9,Chrome下面,居然没效果?

由于我的系统是win8,故用的是IE10.所以在开发过程中一直没发现问题的所在.

琢磨了许久,发现2013在加载控件的时候,首先加载的是一个div层,当你点击div之后,才会加载选项集的select.然而,在IE8,IE9,Chrome下面,选项集的select在页面onload完之后并没有马上出现,而是在onload完之后,大概接近1分钟后,dom才会去加载选项集的selec.而IE10却没有这样的情况.

不得已的情况下,才采用上面的方式.

另外附上原先的情况代码:

//表单加载时转化单选为多选
function ConvertToMultiPicklist(fieldSchema) {

    var picklist = document.getElementById(fieldSchema);
    var picklistValue = document.getElementById(fieldSchema + "_value").innerText;

    if (picklist != null && picklistValue != null) {

        //step1:获取原始picklist
        originalSelectOption = document.getElementById(fieldSchema + "_i");

        if (originalSelectOption != null && originalSelectOption != undefined) {

            var checkBoxHtml = "";

            var originalChildCount = originalSelectOption.parentElement.childElementCount;

            var originalSelectOptionClone = originalSelectOption;

            var selectOptionWrap = document.getElementById(fieldSchema + "_d");

            //step2:移除td下的子节点
            for (var i = 0; i < selectOptionWrap.childElementCount ; i++) {
                selectOptionWrap.removeChild(selectOptionWrap.childNodes[0]);
            }


            //↓step3:开始构建多选所需的HTML标签---begin
            var divAdd = document.createElement("div");
            //divAdd.style.border = "1px solid #f3f1f2";
            divAdd.style.paddingTop = "0px";
            divAdd.style.paddingRight = "20px";
            divAdd.style.paddingBottom = "20px";
            divAdd.style.paddingLeft = "0px";
            divAdd.style.marginLeft = "15px";

            var ulAdd = document.createElement("ul");
            ulAdd.style.listStyle = "none";

            for (var i = 1; i < originalSelectOptionClone.childNodes.length; i++) {
                var checkboxId = "cb_" + fieldSchema + "_" + i;

                var liAdd = document.createElement("li");
                liAdd.style.cssFloat = "left";
                liAdd.style.display = "block";
                liAdd.style.paddingLeft = "5px";

                var checkboxAdd = document.createElement("input");
                checkboxAdd.type = "checkbox";
                checkboxAdd.id = checkboxId;
                checkboxAdd.value = originalSelectOptionClone[i].value;
                checkboxAdd.style.width = "auto";
                checkboxAdd.className = fieldSchema;

                var labelAdd = document.createElement("label");
                ////labelAdd.for = checkboxId;//  这样写不知为何不起效果
                ////labelAdd.setAttribute("for", checkboxId);
                labelAdd.innerText = originalSelectOptionClone[i].text;

                if (picklistValue.indexOf(checkboxAdd.value + ":" + labelAdd.innerText+";")>-1) {
                    checkboxAdd.checked = "checked";
                }

                liAdd.appendChild(checkboxAdd);
                liAdd.appendChild(labelAdd);
                ulAdd.appendChild(liAdd);

            }

            divAdd.appendChild(ulAdd);
            selectOptionWrap.appendChild(divAdd);
            //↑step3:开始构建多选所需的HTML标签---end

        }
    }
}

3.最后,还需要一个OnSave事件,如下

//表单保存时保存多选值
function SaveMultiPicklist(fieldSchema) {

    //var checkBoxList = document.getElementsByClassName(fieldSchema);

    //if (checkBoxList.length <= 0) return;

    //var saveValues = "";

    //for (var i = 0; i < checkBoxList.length; i++) {
    //    if (checkBoxList[i].checked) {
    //        saveValues += checkBoxList[i].value + ":" + checkBoxList[i].nextSibling.innerText + ";";
    //    }
    //}
　　//由于IE8不支持getElemenetsByClassName,故采取下面的方式  2014年1月3日 13:54:44

　　

　　　　var saveValues = "";

　　　　$("." + fieldSchema).each(function () {
　　　　if (this.checked) {
　　　　　　saveValues +=this.value + ":" + this.nextSibling.innerText + ";";
　　　　}
　　　　});

Xrm.Page.getAttribute(fieldSchema + "_value").setValue(saveValues); }

其中,new_post_value字段保存的文本格式如100000000:密码修改;100000001:会员注册;100000002:活动查询

最后,由于从vs2012开始,微软已经在其web项目集成了jQuery,故,在crm2013里,可以不引用jQuery类库了.这个确实很方面.(2013里集成的jQuery版本为1.7.2,就现在的版本来说)

最最后,希望以上内容能够帮到看到此文章的各位.同时,若有更好的解决方法,希望能不吝赐教.在此谢过!