根据选择框中的选定值过滤特定的表列

时间:2018-05-02 15:00:26

标签: javascript c# jquery html

我有一个使用jquery"选择"的选择下拉列表连接到sql DB和连接到同一个DB的表。我想根据选择下拉列表的选定值过滤表格。我正在完成对表的过滤,但问题是它是基于每列中的每个单元过滤值。我希望它只根据表格的前两列进行过滤。例如,我在下拉列表中有一个ProjectID和ProjectName,我只想根据这些值过滤表。假设我有一个60的projectID,并且表中的另一个单元格中有60个(比如说"小时"列),项目ID为59,现在它将返回ProjectID为59的那一行。任何指针都非常感激。这是我的剧本:

    //page load
    $(document).ready(function () {
        $(".chosen").chosen({         
            no_results_text: "Nothing found!"              
        });       

        displaygrid();

    });

    //functions
    function displaygrid() {
        $('#chosenproj').change(function () {
            var selection = $(this).val();
            $('tbl1')[selection ? 'show' : 'hide']();
            if (selection) {  // iterate only if `selection` is not empty
                $.each($('#tbl1 tbody tr'), function (index, item) {
                    $(item)[$(item).is(':contains(' + selection + ')') ? 'show' : 'hide']();
                });
            }
        });
    };

</script>

这是我的html标记:

      <div>          
        <select id="chosenproj" class="chosen" runat="server"  
          datatextfield="ProjectFull" datavaluefield="ProjectID" 
         style="width:350px;">               
        </select>
    </div>
    <div>
      <table id="tbl1" class="tblsorter">    
     <thead>                   
            <tr>                   
                <th>ProjectID</th>                    
                <th>Project Name</th>
                <th>TaskDescription</th>
                <th>TaskDueDate</th>
                <th>StatusDescription</th>
                <th>EstimatedHours</th>
                <th>SprintDateRange</th>
            </tr>
       </thead>   
        <asp:Repeater ID="rptTasks" runat="server" EnableViewState="false">
            <HeaderTemplate>
                <tbody>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td><%# Eval("ProjectID") %></td>                        
                    <td><%# Eval("ProjectName") %></td>
                    <td><%# Eval("TaskDescription") %></td>
                    <td><%# Eval("TaskDueDate", "{0:d}") %></td>
                    <td><%# Eval("StatusDescription") %></td>
                    <td><%# Eval("EstimatedHours") %></td>
                    <td><%# Eval("SprintDateRange") %></td>                   
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </tbody>
            </FooterTemplate>
        </asp:Repeater>
     </table>
         </div>

我的DBConnection链接后面的C#页面代码和来源ddl和表的类:

   protected void Page_Load(object sender, EventArgs e)
    {            
        chosenproj.DataSource = ProjectModel.GetProjectList();
        chosenproj.DataBind();
        rptTasks.DataSource = ProjectModel.TaskList();
        rptTasks.DataBind();
    }

0 个答案:

没有答案