更改一组用户创建的项目的 js 排序标准

Question

我有这个代码，允许通过输入表单创建项目（合同）列表。

它创造了这个：

最靠近左侧的项目是父项目，其他项目是子项目。好吧，就像现在一样，它们根据“cdate”值的日期进行排序，后者位于顶部。显示的数字（No.2、No.1 等）是动态分配的，只是为了保持订单。

例如，如果创建的第一个父项的日期为 2024 年 4 月 1 日，而第二个父项的日期为 2024 年 4 月 12 日，则第二个父项将转到顶部并获取第 1 名，第一个创建的项将转到第二位。子项的情况相同，它们在父项下方排序，其中“cdate”值直接早于其自己的“cdate”值，并且相同的条件适用于在父日期之间创建的所有子项。添加项目时，您可以切换要创建的项目类型：父项或子项。

添加项目时，您可以切换要创建的项目类型：父项或子项。

以上是表格。在左侧，创建父项。在右侧，切换为创建一个子项目，因为它是这两个项目的唯一形式。

这是下面的表格。

<ul>
    <li><div class="item-content">
        <div class="item-inner">
            <div class="item-subtitle">¿Suplemento?</div>
            <div class="item-after">
            <label class="label-switch"><b class="hidden">Escoger si es suplemento</b>
                <input id="isEvolution" type="checkbox"/>
                <div class="checkbox"></div>
            </label>
            </div>
            </div>
        </div>
    </li>
    <li>
    <div id="sens2" class="sensitivefield">
    <div class="item-content">
        <div class="item-inner">
            <div class="item-input"><label for="cname">Nombre del Contrato</label>
            <input id="cname" type="text" placeholder="* Nombre del Contrato" required value="{{model.cname}}"/>
            </div>
        </div>
    </div>
    </div>
    </li>
    <li>
    <div id="sens3" class="sensitivefield" style="display:none">
    <div class="item-content">
        <div class="item-inner">
            <div class="item-input"><label for="sname">Nombre del Suplemento</label>
            <input id="sname" type="text" placeholder="* Nombre del Suplemento" required value="{{model.sname}}"/>
            </div>
        </div>
    </div>
    </div>
    </li>
    <li>
    <div class="item-content">
        <div class="item-inner">
            <div class="item-input"><label for="cdate">Fecha</label>
            <input id="cdate" type="date" placeholder="* Fecha" required value="{{model.cdate}}"/>
            </div>
        </div>
    </div>
    </li>
    <li>
    <div class="item-content">
        <div class="item-inner">
            <div class="item-input"><label for="cnumber">Número del Contrato</label>
            <input id="cnumber" type="text" placeholder="* Número del Contrato" required value="{{model.cnumber}}"/>
            </div>
        </div>
    </div>
    </li>
    <li>
        <div class="item-content">
            <div class="item-subtitle">Vigencia</div>
        </div>
    <li>
    <div class="item-content">
        <div class="item-inner">
            <div class="item-input">
            <label for="sdate">Desde</label>
            <input id="sdate" type="date" placeholder="* Desde" required value="{{model.sdate}}"/>
            <label for="ldate">Hasta</label>
            <input id="ldate" type="date" placeholder="* Hasta" required value="{{model.ldate}}"/>
            </div>
        </div>
    </div>
    </li>
    <li><div id="sens1" class="sensitivefield">
        <div class="item-content">Objeto del Contrato</div>
    <div class="item-content">
        <div class="item-inner">
            <div class="item-input"><label class="hidden" for="cobject">Objeto del Contrato</label>
            <textarea class="resizable" id="cobject" placeholder="* Objeto del Contrato"></textarea>
            </div>
        </div>
    </div>
    </div>
    </li>
    <li>
    <div class="item-content">
        <div class="item-inner">
            <div class="item-input"><label for="cvalue">Valor del Contrato</label>
            <input id="cvalue" type="number" step="any" placeholder="* Valor del Contrato" required value="{{model.cvalue}}"/>
            </div>
        </div>
    </div>
    </li>
</ul>

这是显示结果的 html 代码：

<ul>
    {{#each apps}}
        <li class="accordion-item">
            <a href="#" class="item-content item-link" aria-label="Ver contrato">
                <div class="item-media">
                    {{#if isEvolution}}<i class="icon simbicon-evolution" style="margin-left:25px" aria-hidden="true"></i>{{/if}}
                    {{#unless isEvolution}}<i class="icon simbicon-contract" aria-hidden="true"></i>{{/unless}}
                </div>
                    {{#unless isEvolution}}<div class="item-inner"><div class="item-title"><b>No. {{idL}}: </b>{{cname}}</div></div></a>{{/unless}}
                    {{#if isEvolution}}<div class="item-inner"><div class="item-title"><b>No. {{idL}}: </b>{{sname}}</div></div></a>{{/if}}
            <div class="accordion-item-content">
            <div class="list-group">
            <div class="item-content">
                <div class="item-inner">
                    <div class="item-subtitle">Fecha: {{cdate}}</div>
                </div>
            </div>
            <div class="item-content">
                <div class="item-inner">
                    <div class="item-subtitle">Número: {{cnumber}}</div>
                </div>
            </div>
            <div class="item-content">
                <div class="item-inner">
                    <div class="item-subtitle">Vigencia:<br/>desde {{sdate}}<br/>hasta {{ldate}}</div>
                </div>
            </div>
            <div class="item-content">
                <div class="item-inner">
                    <div class="item-subtitle">Objeto: {{cobject}}</div>
                </div>
            </div>
            <div class="item-content">
                <div class="item-inner">
                    <div class="item-subtitle">Valor: {{cvalue}}.00 CUP</div>
                </div>
            </div>
            <br/><br/>
        </li>
    {{/each}}
</ul>

这是对项目进行排序的js代码：

Client.prototype.getFullAppointments2 = function() {
    var theApps=this.contracts;
    var theApps2=[];
    var currentInApp=null;
    var firstTime=true;
    var counterI=0;
    var counterE=0;
    var item=null;
    theApps.sort(appsSortCre); //appsSortCre  appsSortDec
    for (var i = 0, len = theApps.length; i < len; i++) {
        item = theApps[i];
        if (item.isEvolution==0) {
            if (firstTime) {
                firstTime=false;
                currentInApp=item;
            }else{
                counterE=0;
                counterI++;
                currentInApp.idL=counterI;
                theApps2.push(currentInApp);
                currentInApp=item;
            }

        }else{
            counterE++;
            item.idL=counterE;
            theApps2.push(item);
        }
    }

    if ((item!=null)&&(currentInApp!=null)){
        counterI++;
        currentInApp.idL=counterI;
        theApps2.push(currentInApp);
    }
    //invert
    var theApps3=[];
    for (var i = 0, len = theApps2.length; i < len; i++) {
        theApps3.push(theApps2[len-i-1]);
    }
    return theApps3;
};

假设所有值都存储在本地存储中。

现在它工作得很好，但我需要更改排序标准，但保持按日期排序。我的意思是，添加一个选项选择器，允许您选择将孩子分配给哪个父母。我知道可以使用父 ID 或父名称或两者都解决，方法是选择器向您显示父“cname”，供您从列表中进行选择。在 html 部分，它会是这样的：

<li>
<div class="item-content">
    <div class="item-inner">
        <div class="item-input">
            <label class="hidden" for="pid">Select a parent</label>
            <select name="pid" id="pid">
                <option class="item-inner" value="">Select a parent</option>
                <option class="item-inner" value="parent_id">Parent Name</option>
                <option class="item-inner" value="parent_id">Parent Name</option>
                <option class="item-inner" value="parent_id">Parent Name</option>
                
                ..............................
                
                <option class="item-inner" value="parent_id">Parent Name</option>
            </select>
        </div>
    </div>
</div>
</li>

但是我被困在js部分了。

如何修改上面的js代码以在表单中显示所有先前创建的父母的列表以供选择以分配孩子？一旦选择，如何将该孩子分配给所选的父母？

类似这样的：

Answer 1

您可以定义排序函数并对选项进行排序并相应地更改内部 HTML：

var myItems = document.getElementById("my-items");
var func = document.getElementById("func");
var direction = document.getElementById("direction");

var sortFunctions = {
    alphabet: function(a, b) {
        return (a.value < b.value) ? -1 : 1;
    },
    numeric: function(a, b) {
        return a.value - b.value;
    },
    alphabetDesc: function(a, b) {
        return sortFunctions.alphabet(b, a);
    },
    numericDesc: function(a, b) {
        return sortFunctions.numeric(b, a);
    }
};

function reorder(what, func, direction) {
    let items = [];
    for (let option of what.children) {
        items.push({value: option.value, text: option.innerText});
    }
    what.innerHTML = items.sort(sortFunctions[func.value + ((direction.value === "asc") ? "" : "Desc")]).map(item => `<option value="${item.value}">${item.text}</option>`);
}

<select id="func" onchange="reorder(myItems, func, direction)">
    <option value="alphabet">Alphabet</option>
    <option value="numeric">Numeric</option>
</select>
<select id="direction" onchange="reorder(myItems, func, direction)">
    <option value="asc">Ascending</option>
    <option value="desc">Descending</option>
</select>
<select id="my-items">
    <option value="1">1</option>
    <option value="10">10</option>
    <option value="2">2</option>
</select>