PDA

View Full Version : freeze کردن سطر عنوان در جدول



nimaaamin
یک شنبه 09 مهر 1396, 21:42 عصر
سلام دوستان
من جدول نمایش داده هام را در جاوااسکریپت به شکل زیر ایجاد میکنم
$("#gridDefineNewReportDamage tr").remove();
$("#gridDefineNewReportDamage").append("<tr class=GridViewHeaderStyle >" +
"<th class=noExl></th>" +
"<th class=noExl></th>" +
"<th class=noExl></th>" +
"<th>ردیف</th>" +
"<th>عامل خسارت/قهری</th>" +
"<th>تاریخ وقوع</th>" +
"<th>تاریخ ثبت</th>" +
"<th colspan=4>محل وقوع</th>" +
"<th colspan=11>خسارت</th>" +
"</tr>" +
"<tr class=GridViewHeaderStyle>" +
"<th class=noExl></th>" +
"<th class=noExl></th>" +
"<th class=noExl></th>" +
"<th></th>" +
"<th></th>" +
"<th><select id=selfillterMonthRegisterReport multiple=multiple onchange=txtfilterDefualtMonth_change(this.id) class=noExl style=width:150px;height:80px><option value=1>فروردین</option><option value=2>اردیبهشت</option><option value=3>خرداد</option><option value=4>تیر</option><option value=5>مرداد</option><option value=6>شهریور</option><option value=7>مهر</option><option value=8>آبان</option><option value=9>آذر</option><option value=10>دی</option><option value=11>بهمن</option><option value=12>اسفند</option></select></th>" +
"<th></th>" +
"<th>شهرستان</th>" +
"<th>بخش</th>" +
"<th>دهستان</th>" +
"<th>روستا</th>" +
"<th>بخش خسارت دیده</th>" +
"<th>موارد خسارت</th>" +
"<th colspan=2>وضعیت موجود</th>" +
"<th colspan=2>بیمه</th>" +
"<th colspan=5>خسارت</th>" +
"</tr>" +
"<tr class=GridViewHeaderStyle>" +
"<th class=noExl></th>" +
"<th class=noExl></th>" +
"<th class=noExl></th>" +
"<th></th>" +
"<th ><select multiple=multiple class=noExl id=selfiltercrisisOperatingLosses onchange=selfiltercrisisOperatingLosses_change(thi s.id) style=width:150px;height:100px;></select></th>" +
"<th ><select multiple=multiple class=noExl id=txtfilterDate onchange=txtfilterDate_change(this.id) style=width:150px;height:100px;></select></th>" +
"<th ><select multiple=multiple class=noExl id=txtfilterDateRegister onchange=txtfilterDateRegister_change(this.id) style=width:150px;height:100px;></select></th>" +
"<th ><select multiple=multiple class=noExl id=selfilterCity onchange=selfilterCity_change(this.id) style=width:150px;height:100px;></select></th>" +
"<th ><select multiple=multiple class=noExl id=selfilterpart onchange=selfilterpart_change(this.id) style=width:150px;height:100px;></select></th>" +
"<th ><select multiple=multiple class=noExl id=selfilterviliage onchange=selfilterviliage_change(this.id) style=width:150px;height:100px;></select></th>" +
"<th ><select multiple=multiple class=noExl id=selfiltersubviliage onchange=selfiltersubviliage_change(this.id) style=width:150px;height:100px;></select></th>" +
"<th ><select multiple=multiple class=noExl id=selfiltercrisisTypeOfDemage onchange=selfiltercrisisTypeOfDemage_change(this.i d) style=width:150px;height:100px;></select></th>" +
"<th ><select multiple=multiple class=noExl id=selfiltercrisisTypesubDemage onchange=selfiltercrisisTypesubDemage_change(this. id) style=width:150px;height:100px;></select></th>" +
"<th style=width:100px;>سطح کل موجود در شهرستان</th>" +
"<th style=width:100px;>تعداد بهره برداران شهرستان</th>" +
"<th style=width:100px;>میزان کل تولید در شهرستان</th>" +
"<th style=width:100px;>سطح بیمه شده در شهرستان</th>" +
"<th style=width:100px;>تعداد بهره برداران در شهرستان</th>" +
"<th style=width:100px;>مساحت</th>" +
"<th style=width:100px;>میزان محصول</th>" +
"<th style=width:100px;>درصد</th>" +
"<th style=width:100px;>مبلغ خسارت</th>" +
"</tr>");
flgRefreshbinddata_gridDefineNewReportDamage = true;
}
else {
$("#gridDefineNewReportDamage").find("tr:gt(2)").remove();
}
$.each(Result.d, function (key, value) {
$("#gridDefineNewReportDamage").append("<tr class=heighttrtableorginal>" +
"<td style=width:10px class=noExl><a " + value.stylesumrow + " onclick=deleteDamageReport('"+value.no+"') ><img src=../Images/deleteico.png ></a> </td>" +
"<td style=width:10px class=noExl><a " + value.stylesumrow + " onclick=editDamageReport(event,'" + value.no + "') ><img src=../Images/editico.png ></a></td>" +
"<td style=width:10px class=noExl><a " + value.ExistAttachmentfile + " onclick=AttachmentFile(event,'" + value.no + "') ><img src=../Images/1441980203_mail-attachment.png ></a></td>" +
"<td style=width:30px>" + value.row + "</td>" +
"<td style=width:100px;>" + value.crisisOperatingLosses_name + "</td>" +
"<td style=width:100px;>" + value.dateReport + "</td>" +
"<td style=width:100px;>" + value.dateReportRegister + "</td>" +
"<td style=width:100px;>" + value.city_name + "</td>" +
"<td style=width:100px;>" + value.part_name + "</td>" +
"<td style=width:100px;>" + value.viliage_name + "</td>" +
"<td style=width:100px;>" + value.subViliage_name + "</td>" +
"<td style=width:100px;>" + value.typeDemage_name + "</td>" +
"<td style=width:100px;>" + value.subtypeDemage_name + "</td>" +
"<td style=width:100px>" + delimitNumbers(parseFloat(value.currentStatusAreaA griculture.replace('/', '.')).toFixed(2)) + "</td>" +
"<td style=width:100px>" + delimitNumbers(parseFloat(value.currentStatusTotal UsesAgriculture.replace('/', '.')).toFixed(2)) + "</td>" +
"<td style=width:100px>" + delimitNumbers(parseFloat(value.currentstatusAmoun tProductionAgriculture.replace('/', '.')).toFixed(2)) + "</td>" +
"<td style=width:100px>" + delimitNumbers(parseFloat(value.areaInsuredAgricul ture.replace('/', '.')).toFixed(2)) + "</td>" +
"<td style=width:100px>" + delimitNumbers(parseFloat(value.totalUsesInsuredAg riculture.replace('/', '.')).toFixed(2)) + "</td>" +
"<td style=width:100px>" + delimitNumbers(parseFloat(value.areaDamageAgricult ure.replace('/', '.')).toFixed(2)) + "</td>" +
"<td style=width:100px>" + delimitNumbers(parseFloat(value.amountProductionDa mageAgriculture.replace('/', '.')).toFixed(2)) + "</td>" +
"<td style=width:100px>" + delimitNumbers(parseFloat(value.percentDamageAgric ulture.replace('/', '.')).toFixed(2)) + "</td>" +
"<td style=width:100px>" + delimitNumbers(parseFloat(value.costsDamageAgricul ture.replace('/', '.')).toFixed(2)) + "</td>" +
"</tr>");

});

مشکلی که دارم وقتی اطلاعات زیاد می شود باید همانند اکسل هدر جدول freeze بشه(هدر جدول همواره نمایان باشد حتی وقتی با استفاده از نوار لغزنده به سمت پایین میرود)
لطفا راهنماییم کنید که چطور میتونم این مشکلم حل کنم

moslem.hady
دوشنبه 10 مهر 1396, 07:51 صبح
مثال نمونه:
http://jsfiddle.net/DTcHh/1362/
http://jsbin.com/zuzuqe/1/edit?html,css,js,output
http://jsfiddle.net/jmosbech/stFcx/