关于js的总结

蔚落 2022-08-02 13:59 174阅读 0赞

### 1、如何选出所有选中的checkbox ###

var $selDes = $('.result-table tbody').find("input:checked");

2、删除单元格中的某一行：

这里是如果某一行中的input被选中，则将该行删除。

$selected.each(function (i,item) {
           $(this).closest('tr').remove();
    })

### 3、定义变量时，一般最好赋予初始值 ###

### 4、不到万不得已，不要在事件内部再绑定事件，这样会造成重复绑定。 ###

### 5、 ###

比如说有<tr><td><input type="checkbox"/></td>userid<td></td></tr>如果input被选中，则取出这一行的userid.最好的做法是，在利用freemarker模板的情况下，可以这样写：

<td><input type="checkbox" class="d-choose d-checked" data-pid="${expert.obsUserId!''}"></td>
    <td><a class="userid" href="http://10.1.2.142/u/${expert.obsUserId!''}" target="blank" >${expert.obsUserId!''}</a></td>

利用data-pid。然后在遍历的时候取出pid:

$selected = $('.result-table tbody').find('input:checked');
     $selected.each(function (i,item) {
            userids += $(this).data('pid') + ',';
     });

###  6.关于禁用按钮的情况 ###

### 例如：有一个删除按钮，当有type为checkbox的input被选中时，该按钮才可以点击，否则不可点击。 ###

我的做法是：每次有checkbox的状态被改变时，先判断下当前有没有checkbox被选中,有则为该按钮添加一个类名，没有则移除该类名。  
 在添加的类名上为删除按钮添加点击事件和相应的样式  
 代码如下：

$('.d-checked').on('change', function() {
                var $self = $(this);
                var $selDes = $('.result-table tbody').find("input:checked");
                if ($selDes.length === 0) {
                    $('.cancel-btn').addClass('disabled');
                    $('.cancel-btn').removeClass('del-btn');
                } else {
                    $('.cancel-btn').removeClass('disabled');
                    $('.cancel-btn').addClass('del-btn');
                }
                
     });

添加对应的鼠标样式

.result .disabled {
        cursor:not-allowed;
    }
    .result .del-btn{
        cursor:pointer;
    }

### 7、在url中拼接字符串时，可以写一个通用的函数 ###

例如：

然后将数组中的内容用&拼接

$('.d-screen').on('click', function() {
        if(!getParams(paramArr)){
            return;
        }
        location.href = '/expert/search' + (paramArr.length > 0 ? ('?' + paramArr.join('&')) : '');
    })

###  8、关于freemarker的使用 ###

利用freemarker时，因为之前不太会用，所以遇到了一个问题，就是发送请求之后，页面会被刷新，填入的选项都会变成默认值。  
 其实可以让后台把参数利用freemarker返回来，然后填充到对应的选项中。  
 如下：  
<\#assign param = "">  
        <\#if searchparam??>  
            <\#assign param = param + '&searchparam' + searchparam>  
        </\#if>  
        <\#if province??>  
            <\#assign param = param + '&province=' + province>  
        </\#if>  
        <\#if city??>  
            <\#assign param = param + '&city=' + city>  
        </\#if>  
        <\#if minscore??>  
            <\#assign param = param + '&minscore=' + minscore>  
        </\#if>  
        <\#if maxscore??>  
            <\#assign param = param + '&maxscore=' + maxscore>  
        </\#if>  
        <\#if serviceareaid??>  
            <\#assign param = param + '&serviceareaid=' + serviceareaid>  
        </\#if>  
        <\#if servicestatus??>  
            <\#assign param = param + '&servicestatus=' + servicestatus>  
        </\#if>  
  
如果是type为text的input,写法如下：

如果是下拉框：

<select class="o-service-status">  
             <option value="-1" selected>不限</option>
             <option value="0"  <#if servicestatus?? && servicestatus == 0>selected</#if> >未抢单</option>
             <option value="1"  <#if servicestatus?? && servicestatus == 1>selected</#if> >抢单中</option>
             <option value="2"  <#if servicestatus?? && servicestatus == 2>selected</#if>>接单中</option>
     </select>

如果是动态生成的下拉框:

js的处理如下：

$.each(provinces, function(i, el){
                    if (el.id == pId) {
                        strSelect = ' selected="selected" ';
                        initCity(el.cities, cId);
                    } else {
                        strSelect = '';
                    }
                    tmpl = '<option value="' + el.id + '" '+ strSelect+'>' + el.name + '</option>';
                    ret.push( tmpl );
                })

freemarker实现的翻页按钮如下：

<ul class="pagination page-break">
                <#if page gt 1>
                <li class="pl">
                    <a href="/expert/search/${page-1}?${param}" class="p-btn p-btn-pre btn btn-primary">上一页</a>
                </li>
                </#if>
                <li>
                    <div class="cur"><span class="cur-num">${page!''}</span>/<span class="total-num">${pageNum!''}</span></div>
                </li>
                <#if page lt  pageNum  >
                <li>
                    <a href="/expert/search/${page+1}?${param}" class="p-btn p-btn-next btn btn-primary">下一页</a>
                </li>
                </#if>
            </ul>