Javascript и множественные флажки Все флажки - PullRequest
Новая
       62

Javascript и множественные флажки Все флажки

1 голос
/ 30 марта 2020

Я очень стараюсь понять, как сделать так, чтобы несколько флажков работали на одной странице. У нас были разработчики, которые годами собирали и добавляли код.

Но для этого нужно иметь один отчет о пользователях и флажок рядом с началом каждой строки. Эти поля могут быть отмечены для добавления нескольких пользователей во временную группу. Но наверху есть флажок, который действует как флажок все.

Дилемма в том, что я создал несколько групп пользователей. Верхний флажок все флажки, как вы можете себе представить, проверяет все ящики пользователя. То, что я хотел бы сделать, это сделать верхний флажок все флажки флажки только для этого раздела.

Вот пример того, как это выглядит:

enter image description here

Проблема в том, что я не так хорош в javascript, но имею потратил часы, пытаясь поработать с кодом, чтобы только что принял / подтвердил SMS, отметьте все окошки, установите флажки под ним И так далее.

Вот код для раздела «Принятые / подтвержденные SMS»: 

<!--- now, render the results table heading --->        
<table id="results" cellpadding="0" cellspacing="0" class="rowSelect" width="100%">
    <tr>
        <cfif This.CanManageUsers or This.CanSendAlerts>
            <th id="addToAddHoc"><cfset adHocGroupRenderer.RenderCheckAll()></th>
        </cfif>
        <!---<th width="100">Positions</th>--->
        <th width="75">Response</th>

        <th width="100">First Name</th>
        <th width="100">Last Name</th>
        <th width="280"><cfif session.view_users>
            Phone Number
        <cfelse>
        N/A
        </cfif>
        Carrier</th>
        <th class="nw">Message Sent</th>
        <th class="nw">Reply Received</th>
    </tr>
    <cfloop from = "1" to = "#get_messages_accept.RecordCount#" index = "i">
        <cfif IsDate(get_messages_accept.message_date[i])>
            <cfset get_messages_accept.message_date[i] = Application.TimeZoneConverter.convertTime(ParseDateTime(get_messages_accept.message_date[i]), 'dbToLocal', This.TimeZone) />
        </cfif>

        <cfset subscriber = Application.provider.GetSubscriber(get_messages_accept.sub_id[i]) />
        <tr>
            <cfif This.CanManageUsers or This.CanSendAlerts>
                <td><cfset adHocGroupRenderer.RenderCheckbox(get_messages_accept.sub_id[i])></td>
            </cfif>
            <!---<td>#i#</td>--->
            <td><font color="##4DA019"><img src="../../imgs/new/thumb_up.png" width="20"> #UCASE(get_messages_accept.sms_reply[i])#</font></td>
            <td><font color="##4DA019">#subscriber.FirstName#</font></td>
            <td><font color="##4DA019">#subscriber.LastName#</font></td>
            <td class="nw" width="280"><cfif session.view_users>
                <cfif IsNumeric(get_messages_accept.dest[i])>#subscriber.ConvertToHtml(Settings, get_messages_accept.dest[i], (This.CanManageUsers or This.CanSendAlerts))#<cfelse>N/A</cfif>/
            </cfif>
            #get_messages_accept.carrier_title[i]#</td>
            <td class="nw">
                #DateFormat(get_messages_accept.message_date[i],"m/d/yyyy")#&nbsp;
                #TimeFormat(get_messages_accept.message_date[i],"h:mm:sstt")#
            </td>
            <td class="nw">
                #DateFormat(get_messages_accept.sms_reply_time[i],"m/d/yyyy")#&nbsp;
                #TimeFormat(get_messages_accept.sms_reply_time[i],"h:mm:sstt")#
            </td>
        </tr>
    </cfloop>               
</table>

Вот код для принятого / подтвержденного голоса 

<div id="actions">
    <img src="../../imgs/new/phone.png" width="25"> Accepted/Confirmed Voice
</div>


<!--- now, render the results table heading --->        
<table id="results" cellpadding="0" cellspacing="0" class="rowSelect" width="100%">
    <tr>
        <cfif This.CanManageUsers or This.CanSendAlerts>
            <th id="addToAddHoc"><cfset adHocGroupRenderer.RenderCheckAll()></th>
        </cfif>
        <!---<th width="100">Positions</th>--->
        <th width="75">Response</th>
        <th width="100">First Name</th>
        <th width="100">Last Name</th>  
        <cfif session.view_users>
            <th width="280">Phone</th>
        </cfif>


        <th class="nw">Message Sent</th>
        <th class="nw">Reply Received</th>
    </tr>
    <cfloop from = "1" to = "#get_messages_accept_voice.RecordCount#" index = "i">
        <cfif IsDate(get_messages_accept.message_date[i])>
            <cfset get_messages_accept.message_date[i] = Application.TimeZoneConverter.convertTime(ParseDateTime(get_messages_accept.message_date[i]), 'dbToLocal', This.TimeZone) />
        </cfif>

        <cfset subscriber = Application.provider.GetSubscriber(get_messages_accept_voice.sub_id[i]) />
        <tr>
            <cfif This.CanManageUsers or This.CanSendAlerts>
                <td><cfset adHocGroupRenderer.RenderCheckbox(get_messages_accept_voice.sub_id[i])></td>
            </cfif>
            <!---<td>#i#</td>--->
            <td><font color="##4DA019"><img src="../../imgs/new/thumb_up.png" width="20"> #UCASE(get_alert.accept_resp)#</font></td>
            <td><font color="##4DA019">#subscriber.FirstName#</font></td>
            <td><font color="##4DA019">#subscriber.LastName#</font></td>
            <cfif session.view_users>
                <td class="nw" width="280">#get_messages_accept_voice.dest[i]#</td>
            </cfif>


            <td class="nw">
                #DateFormat(get_messages_accept_voice.message_date[i],"m/d/yyyy")#&nbsp;
                #TimeFormat(get_messages_accept_voice.message_date[i],"h:mm:sstt")#
            </td>                       
            <td class="nw">
                #DateFormat(get_messages_accept_voice.message_date[i],"m/d/yyyy")#&nbsp;
                #TimeFormat(get_messages_accept_voice.message_date[i],"h:mm:sstt")#
            </td>
        </tr>
    </cfloop>               
</table>

Так, на что ссылается файл в верхней части находится basi c include: 

<cfset var adHocGroupRenderer = Application.ComponentFactory.CreateAdHocGroupRenderer() />

А вот функции, на которые ссылаются: 

<cffunction name="RenderCheckbox" access="public" returntype="void" hint="Renders a Subscriber checkbox." output="true">
    <cfargument name="subscriberID" type="numeric" required="yes" hint="The subscriber ID to render checkbox for.">
    <cfoutput>
        <input type="checkbox" value="#subscriberID#" name="subscriberID" class="selectRow" />
    </cfoutput>
</cffunction>

<cffunction name="RenderCheckAll" access="public" returntype="void" hint="Renders the check all checkbox." output="true">
    <cfoutput>
        <input type="checkbox" value="" id="checkAllSubscriberIDs" name="checkAllSubscriberIDs" />
    </cfoutput>
</cffunction>


<cffunction name="RenderActions" access="public" returntype="void" hint="Renders the action buttons (at the beginning just add button)." output="true">     
    <cfoutput>
        <div id="adHocGroupActions">
            <input type="button" name="addToAdHocGroupButton" value="Add to Temporary Group" id="addToAdHocGroupButton" />
            <span id="adHocGroupAddStatus"></span>
        </div>
    </cfoutput>
</cffunction>

<cffunction name="RenderScript" access="public" returntype="void" hint="Renders the javascript needed." output="true">      
    <cfoutput>
        <script type="text/javascript" src="/js/adHocGroup.js"></script>
        <script type="text/javascript">
            var adHocGroup = new adHocGroup();
        </script>
    </cfoutput>
</cffunction>

Я знаю, что ответ где-то здесь, но я просто могу ' не могу понять это.

Вот исходный код из браузера, как только он будет построен: 

<div id="actions">
    <img src="../../imgs/new/sms.png" width="25"> Accepted/Confirmed SMS 
</div>




        <table id="results" cellpadding="0" cellspacing="0" class="rowSelect" width="100%">
            <tr>

                    <th id="addToAddHoc"> 
        <input type="checkbox" value="" id="checkAllSubscriberIDs" name="checkAllSubscriberIDs" />
    </th>


                <th width="75">Response</th>

                <th width="100">First Name</th>
                <th width="100">Last Name</th>
                <th width="280">
                    Phone Number

                Carrier</th>
                <th class="nw">Message Sent</th>
                <th class="nw">Reply Received</th>
            </tr>

                <tr>

                        <td> 
        <input type="checkbox" value="5364603" name="subscriberID" class="selectRow" />
    </td>


                    <td><font color="#4DA019"><img src="../../imgs/new/thumb_up.png" width="20"> CONFIRM</font></td>
                    <td><font color="#4DA019">Sterling</font></td>
                    <td><font color="#4DA019">Archer</font></td>
                    <td class="nw" width="280"> <a href="https://new.wensnetwork.com/users/editusers.cfm?sub_id=5364603" title="View account details for Sterling Archer"> 3305555555 </a>&nbsp;/
                    Verizon Wireless</td>
                    <td class="nw">
                        3/29/2020&nbsp;
                        6:28:05PM
                    </td>
                    <td class="nw">
                        3/29/2020&nbsp;
                        6:28:17PM
                    </td>
                </tr>

                <tr>

                        <td> 
        <input type="checkbox" value="9092536" name="subscriberID" class="selectRow" />
    </td>


                    <td><font color="#4DA019"><img src="../../imgs/new/thumb_up.png" width="20"> CONFIRM</font></td>
                    <td><font color="#4DA019">Alec</font></td>
                    <td><font color="#4DA019">Smith</font></td>
                    <td class="nw" width="280"> <a href="https://new.wensnetwork.com/users/editusers.cfm?sub_id=9092536" title="View account details for Alec Dettling"> 3305555555 </a>&nbsp;/
                    Verizon Wireless</td>
                    <td class="nw">
                        3/29/2020&nbsp;
                        6:28:05PM
                    </td>
                    <td class="nw">
                        3/29/2020&nbsp;
                        8:09:07PM
                    </td>
                </tr>

                <tr>

                        <td> 
        <input type="checkbox" value="10504336" name="subscriberID" class="selectRow" />
    </td>


                    <td><font color="#4DA019"><img src="../../imgs/new/thumb_up.png" width="20"> CONFIRM</font></td>
                    <td><font color="#4DA019">Ashley</font></td>
                    <td><font color="#4DA019">Jones</font></td>
                    <td class="nw" width="280"> <a href="https://new.wensnetwork.com/users/editusers.cfm?sub_id=10504336" title="View account details for Ashley Jones">3305555555</a>&nbsp;/
                    Verizon Wireless</td>
                    <td class="nw">
                        3/29/2020&nbsp;
                        6:28:05PM
                    </td>
                    <td class="nw">
                        3/29/2020&nbsp;
                        7:50:57PM
                    </td>
                </tr>

        </table>

        <div id="actions">
            <img src="../../imgs/new/phone.png" width="25"> Accepted/Confirmed Voice
        </div>



        <table id="results" cellpadding="0" cellspacing="0" class="rowSelect" width="100%">
            <tr>

                    <th id="addToAddHoc"> 
        <input type="checkbox" value="" id="checkAllSubscriberIDs" name="checkAllSubscriberIDs" />
    </th>


                <th width="75">Response</th>
                <th width="100">First Name</th>
                <th width="100">Last Name</th>  

                    <th width="280">Phone</th>



                <th class="nw">Message Sent</th>
                <th class="nw">Reply Received</th>
            </tr>

                <tr>

                        <td> 
        <input type="checkbox" value="3981337" name="subscriberID" class="selectRow" />
    </td>


                    <td><font color="#4DA019"><img src="../../imgs/new/thumb_up.png" width="20"> CONFIRM</font></td>
                    <td><font color="#4DA019">Scott</font></td>
                    <td><font color="#4DA019">dfwefwew</font></td>

                        <td class="nw" width="280">3302895161</td>



                    <td class="nw">
                        3/29/2020&nbsp;
                        6:28:13PM
                    </td>                       
                    <td class="nw">
                        3/29/2020&nbsp;
                        6:28:13PM
                    </td>
                </tr>

        </table>

Я знаю, что многое нужно пересмотреть, но я надеюсь, что это что-то простое, что мне не хватает. Любые предложения или направления будут с благодарностью.

Большое спасибо !!!

1 Ответ

0 голосов
/ 30 марта 2020

Я дам вам достаточно, чтобы вы могли научиться, так сказать, 1028 *. Во-первых, вам нужен высокий уровень контроля в JavaScript, чтобы знать, что происходит Мудрое событие : 

var option = {};

window.onclick = function(event)
{
 option.click = event.target;

 if (event.target.nodeName == 'input' && event.target.getAttribute('type') == 'checkbox')
 {
  //See notes from this point.
 }
}

Теперь программное обеспечение сильно различается. В моем случае я просто использовал бы push_current_id(), чтобы получить идентификатор текущей страницы, итерировал бы по id_(push_current_id()).tag_('form'), пока не нашел is_node_parent(event.target,id_(push_current_id()).tag_('form')[i]). Вот эта функция: 

function is_node_parent(node_find,node_parent)
{
 var nf = false;
 var nc = false;
 var error = false;

 if (typeof node_find=='string')
 {
  if (id_(node_find)) {nf = id_(node_find);}
  else {error = 'Developer Error: you must first verify that the node_find id '+node_find+' exists before calling is_node_parent().';}
 }
 else {nf = node_find;}

 if (typeof node_parent=='string')
 {
  if (id_(node_parent)) {nc = id_(node_parent);}
  else {error = 'Developer Error: you must first verify that the node_parent id '+node_parent+' exists before calling is_node_parent().';}
 }
 else {nc = node_parent;}

 if (error) {dialog.alert(error);}
 else if (is_not_null(nf) && is_not_null(nc) && nc.compareDocumentPosition)
 {
  try {var r = nc.compareDocumentPosition(nf);}
  catch (e)
  {
   if (arguments.callee.caller.toString())
   {
    var f = arguments.callee.caller.toString();

    if (f.split('function ')[1])
    {
     f = f.split('function ')[1];

     if (f.split('(')[0]) {f = f.split('(')[0];}
    }
   }
   else {f = 'unknown';}

   report_bug('is_node_parent','Called by '+f+'(); '+e+'.');
  }

  r = (r==20 || r==0) ? true : false;
 }
 else
 {
  console.log(is_node_parent.arguments.callee.caller.toString().split('function '));
  dialog.alert('Error: is_node_parent error, find: '+node_find+', node_parent = '+node_parent+'.');
 }

 return r;
}

Здесь вы можете расширить DOM (например, как я использую id_().tag_()): 

Object.prototype.tag_ = function(t) {return (this.getElementsByTagName && this.getElementsByTagName(t) && this.getElementsByTagName(t).length > 0) ? this.getElementsByTagName(t) : false;}

Итак, с помощью этого кода вы выполняете итерации для каждого * Элемент 1016 * пытается увидеть (изнутри window.onclick обработчик события), является ли form[i] parentNode, который содержит элемент, по которому щелкнули (event.target).

После того, как вы найти этот элемент, затем просто перебрать все входные данные, которые имеют .getAttribute('type') == 'checkbox' и .setAttribute('checked') = true;.

...