Jquery UI可以与表一起排序
请考虑以下图片。
在下图中，行被划分为几行的一部分。 我已经实现了可以对表进行排序的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 & 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 & 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 & 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 & //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 & 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 & 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 & 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 & 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 & //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;
}
1 个答案:
答案 0 :(得分：0)
经过测试，我发现代码没有重大问题。我确实找到了一些你应该纠正的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没有问题的行。
希望这有帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？