Question

请考虑以下图片。

在下图中，行被划分为几行的一部分。我已经实现了可以对表进行排序的Jquery UI，但是，任何行都可以插入表中的任何位置。

我想要的是，行只能在其特定部分中进行排序，例如，不应在第2部分中插入一个部分的行。

所以我正在寻找像跳跃上的验证这样的东西，一行不能用特定的类跳到另一行或者让我知道别的东西。

下面是jquery的代码片段。

$(function(){
            $("#etemplate_table_id").sortable({   /*etemplate_table_id - table id*/
                items:".tbl_row_4",          /*tbl_row_4 - class of rows in yellow color*/
                cursor:"move"
            });
        });

以下是生成示例html的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>

    <link rel="stylesheet" type="text/css" href="project.css">
</head>
<body>


        <div class="table-responsive">
            <table class="table table-bordered tbl_style " id="etemplate_table_id">
                <thead>
                    <tr class="tbl_row_head" "="">
                        <th>M</th>
                        <th>W</th>
                        <th>A</th>
                        <th>Detailed Description</th>
                        <th>R-Class</th>
                        <th>B-Class</th>
                        <th>E-Category</th>
                        <th>ML-Category</th>
                        <th>Labor Rate</th>
                        <th>QTY</th>
                        <th>UOM</th>
                        <th>Duration</th>
                        <th>Crew Size</th>
                        <th>Unit Mhrs.</th>
                        <th>Total Mhrs.</th>
                        <th>Phase</th>
                        <th>Total Cost</th>
                    </tr>
                </thead>
                <tbody>

                <tr class="tbl_row_1" id="H0111">
                                        <td>01</td>
                                        <td colspan="8" class="left_align">House # 109, Vienna Andre</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr><tr class="tbl_row_2" id="01_01-tbl_row_2" name="W002">
                                        <td>01.01</td>
                                        <td colspan="8" class="left_align wbs_master_list_td">Head &amp; Trauma Pt</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>16</td>
                                        <td>0</td>
                                        <td></td>
                                        <td>0</td>
                                    </tr>
                                    <tr class="tbl_row_3">
                                        <td></td>
                                        <td class="cell_grp_brown">Test</td>
                                        <td colspan="7" class="left_align">Activity Description</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>16</td>
                                        <td>0</td>
                                        <td></td>
                                        <td>0</td>
                                    </tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W002__1066">
                                            <td></td>
                                            <td class="cell_grp_brown">01.01.03</td>
                                            <td>1066</td>
                                            <td class="no_wrap_class">Develop Tower Near Yellow East River</td>
                                            <td>DATA1</td>
                                            <td>OM_CL</td>
                                            <td>110100</td>
                                            <td>Contractor</td>
                                            <td>0</td>
                                            <td><input size="1" value="" type="text"></td>
                                            <td>LS</td>
                                            <td class="duration_cell">9 days</td>
                                            <td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option></select></td>
                                            <td><input value="8" size="1" class="unit_mhrs_input" type="text"></td>
                                            <td>0</td>
                                            <td>2</td><td>0</td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W002__1259">
                                            <td></td>
                                            <td class="cell_grp_brown">01.01.04</td>
                                            <td>1259</td>
                                            <td class="no_wrap_class">Install Marron Wire M001</td>
                                            <td>PCC-1</td>
                                            <td>ME_CL</td>
                                            <td>130100</td>
                                            <td>Testing &amp; Commissioning</td>
                                            <td>0</td>
                                            <td><input size="1" value="" type="text"></td>
                                            <td>Days</td>
                                            <td class="duration_cell">5 days</td>
                                            <td class="crew_cell"><select class="crew_dropdown"></select></td>
                                            <td><input value="8" size="1" class="unit_mhrs_input" type="text"></td>
                                            <td>0</td>
                                            <td>3</td><td>0</td></tr><tr class="tbl_row_10" id="01_01-tbl_row_10">
                                        <td colspan="12" class="right_align">Subtotal For Head &amp; Trauma Pt</td>
                                        <td></td>
                                        <td>16</td>
                                        <td>0</td>
                                        <td></td>
                                        <td>$0</td>
                                    </tr><tr class="tbl_row_2" id="01_02-tbl_row_2" name="W003">
                                        <td>01.02</td>
                                        <td colspan="8" class="left_align wbs_master_list_td">Base Alm 17 SO</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td></td>
                                        <td>0</td>
                                    </tr>
                                    <tr class="tbl_row_3">
                                        <td></td>
                                        <td class="cell_grp_brown">Test</td>
                                        <td colspan="7" class="left_align">Activity Description</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td></td>
                                        <td>0</td>
                                    </tr><tr class="tbl_row_10" id="01_02-tbl_row_10">
                                        <td colspan="12" class="right_align">Subtotal For Base Alm 17 SO</td>
                                        <td></td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td></td>
                                        <td>$0</td>
                                    </tr><tr class="tbl_row_2" id="01_03-tbl_row_2" name="W004">
                                        <td>01.03</td>
                                        <td colspan="8" class="left_align wbs_master_list_td">Body Mixed &amp; //le </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>5</td>
                                        <td>5</td>
                                        <td></td>
                                        <td>1634</td>
                                    </tr>
                                    <tr class="tbl_row_3">
                                        <td></td>
                                        <td class="cell_grp_brown">Test</td>
                                        <td colspan="7" class="left_align">Activity Description</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>5</td>
                                        <td>5</td>
                                        <td></td>
                                        <td>1634</td>
                                    </tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1000">
                                            <td></td>
                                            <td class="cell_grp_brown">01.02.01</td>
                                            <td>1000</td>
                                            <td class="no_wrap_class">Map of Blue carousel</td>
                                            <td>CVENG</td>
                                            <td>NON O &amp; M</td>
                                            <td>140100</td>
                                            <td>Engineering</td>
                                            <td>789</td>
                                            <td><input size="1" value="1" type="text"></td>
                                            <td>HR</td>
                                            <td class="duration_cell">1 day</td>
                                            <td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option></select></td>
                                            <td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
                                            <td>1</td>
                                            <td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1001">
                                            <td></td>
                                            <td class="cell_grp_brown">01.02.02</td>
                                            <td>1001</td>
                                            <td class="no_wrap_class">Blue Tire Removal</td>
                                            <td>CVENG</td>
                                            <td>O &amp; M</td>
                                            <td>1301E</td>
                                            <td>Engineering</td>
                                            <td>789</td>
                                            <td><input size="1" value="1" type="text"></td>
                                            <td>HR</td>
                                            <td class="duration_cell">5 days</td>
                                            <td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
                                            <td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
                                            <td>1</td>
                                            <td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1002">
                                            <td></td>
                                            <td class="cell_grp_brown">01.02.03</td>
                                            <td>1002</td>
                                            <td class="no_wrap_class">Jet Blue Service A</td>
                                            <td>CVENG</td>
                                            <td>O &amp; M</td>
                                            <td>1301E</td>
                                            <td>Engineering</td>
                                            <td>789</td>
                                            <td><input size="1" value="1" type="text"></td>
                                            <td>HR</td>
                                            <td class="duration_cell">3 days</td>
                                            <td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
                                            <td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
                                            <td>1</td>
                                            <td>1</td><td><input class="total_cost_input" size="1" value="500" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1003">
                                            <td></td>
                                            <td class="cell_grp_brown">01.02.04</td>
                                            <td>1003</td>
                                            <td class="no_wrap_class">Air Pressure Blue Pin</td>
                                            <td>TRENG</td>
                                            <td>Indirect</td>
                                            <td>180100</td>
                                            <td>Engineering</td>
                                            <td>0</td>
                                            <td><input size="1" value="1" type="text"></td>
                                            <td>HR</td>
                                            <td class="duration_cell">4 days</td>
                                            <td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></td>
                                            <td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
                                            <td>1</td>
                                            <td>1</td><td><input class="total_cost_input" size="1" value="12" type="text"></td></tr><tr class="tbl_row_4 no_wrap_class" id="H0111__W004__1004">
                                            <td></td>
                                            <td class="cell_grp_brown">01.02.05</td>
                                            <td>1004</td>
                                            <td class="no_wrap_class">Blue Tax Appraisal For Marty James</td>
                                            <td>TRENG</td>
                                            <td>O &amp; M</td>
                                            <td>1301E</td>
                                            <td>Engineering</td>
                                            <td>0</td>
                                            <td><input size="1" value="1" type="text"></td>
                                            <td>HR</td>
                                            <td class="duration_cell">5 days</td>
                                            <td class="crew_cell"><select class="crew_dropdown"><option selected="">0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option></select></td>
                                            <td><input value="1" size="1" class="unit_mhrs_input" type="text"></td>
                                            <td>1</td>
                                            <td>1</td><td><input class="total_cost_input" size="1" value="122" type="text"></td></tr><tr class="tbl_row_10" id="01_03-tbl_row_10">
                                        <td colspan="12" class="right_align">Subtotal For Body Mixed &amp; //le </td>
                                        <td></td>
                                        <td>5</td>
                                        <td>5</td>
                                        <td></td>
                                        <td>$1634</td>
                                    </tr>
                </tbody>
            </table>                
        </div>

以下是css代码：

.estimatigPortfolioOverview_row_1, .estimatigPortfolioOverview_row_5_right{
    border: 1px solid black;
    padding: 10px;
}

.estimatigPortfolioOverview_row_5_right,.estimatigPortfolioSplit_row_2,.estimatigPortfolioIchrs_row_2, .estimatigPortfolioIchrs_row_4, .estimatigPortfolioSplit_row_4{
    margin-top: 10px;
}

.estimatigPortfolioOverview_row_1 td:nth-child(odd){
    font-size: 13px;
}

.estimatigPortfolioOverview_row_1 input[type="text"]{
    font-size: 11px;
    width: 110px;
}
.estimatigPortfolioOverview_row_1 input[type="checkbox"]{
    margin-left: 5px;
}
.estimatigPortfolioOverview_row_1_div_3, .estimatigPortfolioOverview_row_3,.estimatigPortfolioSplit_row_2,.estimatigPortfolioIchrs_row_2, .estimatigPortfolioIchrs_row_4_col_2 table, .estimatigPortfolioSplit_row_4_col_3 table{
    border: 1px solid black;
}

.estimatigPortfolioOverview_row_1 td, .estimatigPortfolioOverview_row_1 th, .estimatigPortfolioIchrs_row_4 td, .estimatigPortfolioIchrs_row_4 th, .estimatigPortfolioSplit_row_4 td, .estimatigPortfolioSplit_row_4 th{
    border: none !important;
}

.estimatigPortfolioOverview_row_3 label,.estimatigPortfolioOverview_row_5_left .form-group label,.estimatigPortfolioSplit_row_2 label,.estimatigPortfolioIchrs_row_2 label{
    margin-right: 10px;
}

.estimatigPortfolioOverview_row_5_left li label{
    margin-left: 10px;
}

.estimatigPortfolioOverview_row_4 ul li{
    border-left: 1px solid black; 
}

.estimatigPortfolioOverview_row_4 ul li:first-child{
    border: none; 
}

.estimatigPortfolioOverview_row_4 ul li:first-child input{
    margin-left: 10px;
}

.estimatigPortfolioOverview_row_3_4_hr,.estimatigPortfolioIchrs_row_2_3_hr{
    border: 4px solid #b4b40f;
}

.estimatigPortfolioOverview_row_5_right_2, .estimatigPortfolioOverview_row_7_col_1{
    border: 1px solid black;
    text-align: center;
}

.estimatigPortfolioOverview_row_7_col_1{
    padding: 10px;
}

.estimatigPortfolioOverview_row_6{
    margin:10px;
}
.estimatigPortfolioOverview_row_6 button, .estimatigPortfolioIchrs_row_3_footer_button_row button{
    border: 1px solid #351f72;
    color: #351f72;
    background-color: #e9b947;
    padding: 0px 20px;
    margin-top: 5px;
}

.estimatigPortfolioOverview_row_6, .estimatigPortfolioIchrs_row_3_footer_button_row{
    text-align: center;
}

.estimatigPortfolioIchrs_row_3_footer_button_row{
    margin: 15px 0px;
}

.padding_less{
    padding: unset;
}

.estimatigPortfolioSplit_row_2 span{
    font-size: 16px;
    font-weight: bold;
    color: #e3960a;
}

.estimatigPortfolioSplit_row_3, .estimatigPortfolioOverview_row_3{
    margin-top: 20px;
}

.estimatigPortfolioSplit_row_3 table th{
    padding: unset;
    font-size: 13px;
}

.estimatigPortfolio_top_row li{
    float: right;
    margin: 10px;
}

.estimatigPortfolioIchrs_row_3{
    border: 3px solid #ccc1c1;
}

.glyphicon-one-fine-empty-dot::before{
    content: "\25cf";
}

.main_row{
    display: block;
    font-size: 20px;
    font-weight: bold;
    margin: 0px;

}

.glyphicon-one-fine-empty-dot{
    font-size: 30px;
    padding-right: 5px;
}

.glyphicon_dot_1{
    color: #daa50f;
}

.glyphicon_dot_2{
    color: #8c7dda;
}

.glyphicon_dot_3{
    color: #ec3434;
}

.sub_row .glyphicon-plus{
    font-size: 12 !important;
    margin-right: 12px !important;
    color: #000000 !important;
}

.sub_row{
    width: 90%;
    margin: 3px 6%
}

.sub_row div:first-child{
    font-size: 16px;
    margin-left: -3%;
    color: #0ca6d8;
}

.sub_row .sub_row_right_div{
    display: inline-block;
    float: right;
    text-align: center;
    font-size: 12px !important;
    margin-right: 15px; 
}

.sub_row .sub_row_right_div span:first-child{
    text-decoration: underline;
    color: #782828 !important;
}

.estimatigPortfolioIchrs_row_3_col_1, .estimatigPortfolioSplit_row_3_col_1{
    overflow-y: scroll;
    max-height: 350px;
}

.estimatigPortfolioIchrs_row_3_col_1 table th{
    font-size: 14px;
}

.estimatigPortfolioIchrs_row_3_col_1 td{
    font-size: 13px;
}


.eselection_form{
    margin-left: 20px;
}

.estimatigPortfolioOverview_row_4 .list-inline{
    overflow-x: scroll;
    padding: 15px 0px !important;
}


.tbl_row_head, .tbl_row_1, .tbl_row_10{
    background-color: #3399CC;
}
.tbl_row_1{
    color: #ffffff;
    font-weight: bold;
}

.tbl_row_head th{
    white-space: pre;
}

.tbl_row_head th{
    font-weight: normal;
}

.ips_template_table_col .table-responsive{
    max-height: 600px;
    overflow: scroll;
}

.tbl_row_10{
    font-size: 12px;
    font-weight: bold;
}

.tbl_row_2{
    background-color: #E6EDE2;
}

.tbl_row_3, .tbl_row_9{
    background-color: #CCDD90;
}

.tbl_row_4, .tbl_row_5, .tbl_row_6, .tbl_row_7, .tbl_row_8, .tbl_row_9{
    background-color: #f3f2c1;
}

.tbl_style tr:not(.tbl_row_1):not(.tbl_row_2):not(.tbl_row_10) td:nth-child(2){
    background-color: #EEDDDC;
}

.tbl_style tr:not(.tbl_row_1):not(.tbl_row_10) td:nth-child(1){
    background-color: #E6EDE2 !important;;
}

.tbl_style > tbody > tr > td, .tbl_style > tbody > tr > th, .tbl_style > tfoot > tr > td, .tbl_style > tfoot > tr > th, .tbl_style > thead > tr > td, .tbl_style > thead > tr > th {
    border: 1px solid #000000;
}

.ips_template_table_col{
    background-color: #fcfcf1;
    padding: 20px;
}

.estimatigPortfolioIchrs_row_4_col_1 table, .estimatigPortfolioSplit_row_4_col_2 table{
    font-size: 16px;
}

.estimatigPortfolioIchrs_row_4_col_1 select, .estimatigPortfolioSplit_row_4_col_2 select{
    width:90%;
}

.estimatigPortfolioIchrs_row_4_col_2 table:not(a), .estimatigPortfolioSplit_row_4_col_3 table input[type="text"]{
    font-size: 13px;
}

.estimatigPortfolioIchrs_row_4_col_2 tr:first-child input, .estimatigPortfolioSplit_row_4_col_3 tr:first-child input{
    width:90%;
}

.estimatigPortfolioIchrs_row_4_col_2 tr:last-child input, .estimatigPortfolioSplit_row_4_col_3 tr:last-child input{
    width:95%;
}

.estimatigPortfolioIchrs_row_4_col_2 table a, .estimatigPortfolioSplit_row_4_col_3 table a{
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
}

.estimatigPortfolioIchrs_row_4_col_2 table .vertical_align, .estimatigPortfolioSplit_row_4_col_3 .vertical_align{
    vertical-align: bottom;
}

.estimatigPortfolioIchrs_row_4_col_3 table{
    font-size: 12px;
}

.estimatigPortfolioIchrs_row_4_heading_div, .estimatigPortfolioSplit_row_4_heading_div, .overview_master_list_estimate_modal_heading_div{
    display: block;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 20px 0px;   
}

.estimatigPortfolioIchrs_row_4_heading_div span, .overview_master_list_estimate_modal_heading_div span{
    border: 1px solid black;
    padding: 2px 10%;
}

.estimatigPortfolioSplit_row_4_heading_div span{
    border: 1px solid black;
    padding: 2px 2%;
}

.estimatigPortfolioSplit_row_4_col_4 table{
    font-size: 15px;
}

.estimatigPortfolioSplit_row_4_col_4 thead, .estimatigPortfolioIchrs_row_4_col_3 thead{
    border-top: 5px solid #64afe7;
    border-bottom: 5px solid #64afe7;
}

#split_testing_commissioning_modal .modal-dialog, #ichrs_non_incremental_cost_modal .modal-dialog, #overview_master_list_estimate_modal .modal-dialog{
    width: 85% !important;
}

.modal_table_scroll{
    max-height: 40%;
    overflow-y: scroll;
}

.etemplate_btn_div{
    text-align: center;
    margin: 25px 0px 10px 0px;
}

.etemplate_btn_div button{
    padding: 0px 10px;
}

.estimatigPortfolioOverview_row_1 table{
    margin-bottom: unset;
}

.estimatigPortfolioOverview_row_1_div_0_tbl_pid, .estimatigPortfolioOverview_row_1_div_0_tbl_pin{
    margin-left: 13%;
}

@media (max-width: 991px){
    .estimatigPortfolioOverview_row_1_div_0_tbl_pj_name{
        margin-left: 3%;
    }

    .estimatigPortfolioSplit_row_4_heading_div span, .overview_master_list_estimate_modal_heading_div span, .estimatigPortfolioIchrs_row_4_heading_div span{
        display: block;
        white-space: normal;
    }
}

@media (min-width: 992px){
    .estimatigPortfolioOverview_row_1_div_0_tbl_pj_name input[type="text"]{
        width: 100%;
    }    
    .estimatigPortfolioOverview_row_1_div_0_tbl_pj_name{
        margin-left: -5%;
    }
}

.estimatigPortfolioOverview_row_1_div_3{
    padding: 1% 0px;
    margin-top: 8px;
}

.estimatigPortfolioOverview_row_1_div_2  select, .estimatigPortfolioOverview_row_1_div_3 select{
    width: 70px;
}

#header_div_checkbox{
    margin-bottom: 20px;
}

#header_div{
    display: none;
}

.master_list_est_row_1_col_1 .table-responsive{
    max-height: 400px;
    overflow: scroll;
}

#master_excel_file{
    display: none;
}

.master_list_est_row_1_col_2{
    text-align: center;
}

.left_align, .tbl_row_4 td{
    text-align: left;
}

#master_list_modal_on_template .modal-dialog{
    width: 85%;
}

.right_align{
    text-align: right;
}

.no_wrap_class{
    white-space: nowrap;
}

.tbl_row_2 td:nth-child(2){
    padding-left: 70px;
}

.tbl_row_3 td:nth-child(2), .tbl_row_4 td:nth-child(2){
    padding-left: 100px;
}

Answer 1

经过测试，我发现代码没有重大问题。我确实找到了一些你应该纠正的HTML语法问题。像：

<tr class="tbl_row_head" "="">

这会导致问题。

我的测试：https://jsfiddle.net/Twisty/gz28vdbx/1/

<强>的JavaScript

$(function() {
  $("#etemplate_table_id").sortable({ /*etemplate_table_id - table id*/
    items: "* > .tbl_row_4",
    /*tbl_row_4 - class of rows in yellow color*/
    cursor: "move"
  });
});

我能够排除.tbl_row_4没有问题的行。

希望这有帮助。

Jquery UI可以与表一起排序

1 个答案: