在一个多屏的页面，如用repeater绑定table的方法，下拉框选择一项页面都会闪，并且回到页面头部，很不利于查看，如何是页面保持在table处不闪动呢？
可以简单的想到显示与隐藏的方法，将所有下拉框需要绑定的table都显示，然后控制显示与隐藏table达到选择对应下来数据的table。
比较好的方法当然是用ajax动态的根据ddl里的数据改变table里的值，不过做起来也比较麻烦。
具体做法可以下载页面/Files/sunyaling/Default.aspx.txt /Files/sunyaling/Default.txt
总结此功能学习到以下几点：
1、js操作表格，表格的填充、清空内容（从最后一个开始remove，i--）
2、ajax后台方法同普通后台方法一样写。（c# 是这样获得dt里的数据的dt.Rows[i]["StockPool_Level"];而不同于js里打点获得，打点也是不规范的）
3、使用ajax组件 首先：引用Ajax.dll, 然后在web.config中配，
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory,Ajax" />
</httpHandlers>
</system.web>
</configuration>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory,Ajax" />
</httpHandlers>
</system.web>
</configuration>
再在需要调用类的pageload里注册ajax，“Ajax.Utility.RegisterTypeForAjax(typeof(_Default));”，每个组件都有它的规则，明白其中原理才能灵活运用。这句注册也可以不加，它的本质会在html页面上输出2句引用。
<script type="text/javascript" src="/bchataspx/ajax/common.ashx"></script>
<script type="text/javascript" src="/bchataspx/ajax/bchataspx._Default,bchataspx.ashx"></script>
<script type="text/javascript" src="/bchataspx/ajax/bchataspx._Default,bchataspx.ashx"></script>
下面就来具体说明一下整个编写过程
function $(id)
{
return document.getElementById(id);
}
//得到下拉框值调用后台ajax绑定table方法
function BindStockPool()
{
var sacID = $("ddlSac").value;
_Default.BindRepStockPool(sacID,fillSacStock);
}
//根据
function fillSacStock(response)
{
var dt = response.value;
var table = $("tbSac");
var nodes = table.childNodes[0].childNodes;
//每次绑定填充前清空table
for(var i=nodes.length-1;nodes.length>1;i--)
{
table.childNodes[0].removeChild(nodes[i]);
}
for(var i = 0;i<dt.Rows.length;i++)
{
var tr = table.insertRow(-1);//插入一行
var td1= tr.insertCell(-1);//插入一列
//填充td
td1.innerHTML=dt.Rows[i].stockName+"("+dt.Rows[i].stockCode+")";
//设置td格式
td1.setAttribute("className","blue");
td1.setAttribute("align","left");
var td2= tr.insertCell(-1);
td2.innerHTML=dt.Rows[i].newPrice;
td2.setAttribute("align","center");
var td3= tr.insertCell(-1);
td3.innerHTML=dt.Rows[i].profitF;
td3.setAttribute("align","center");
var td4= tr.insertCell(-1);
td4.innerHTML=dt.Rows[i].profitS;
td4.setAttribute("align","center");
var td5= tr.insertCell(-1);
td5.innerHTML=dt.Rows[i].dtsyl;
td5.setAttribute("align","center");
var td6= tr.insertCell(-1);
td6.innerHTML=dt.Rows[i].level;
td6.setAttribute("align","center");
var td7= tr.insertCell(-1);
td7.innerHTML=dt.Rows[i].update;
td7.setAttribute("align","center");
var td8= tr.insertCell(-1);
td8.innerHTML="<a href='#'>查看</a>";
td8.setAttribute("align","center");
}
}
</script>
pageLoad里
ddlSac.Attributes.Add("onchange","BindStockPool();");//切换机构绑定不同数据
ajax方法
public DataTable BindRepStockPool(string sacID)
{
StringBuilder sb = new StringBuilder();
sacID = sacID.Replace("'","");
DataTable dt = entity.StockPool.GetList(" StockPool_ssiSac='"+sacID+"'");
DataTable dtUse = new DataTable();
DataColumn dc = new DataColumn("stockName");
dtUse.Columns.Add(dc);
dc = new DataColumn("stockCode");
dtUse.Columns.Add(dc);
dc = new DataColumn("newPrice");
dtUse.Columns.Add(dc);
dc = new DataColumn("profitF");
dtUse.Columns.Add(dc);
dc = new DataColumn("profitS");
dtUse.Columns.Add(dc);
dc = new DataColumn("dtsyl");
dtUse.Columns.Add(dc);
dc = new DataColumn("level");
dtUse.Columns.Add(dc);
dc = new DataColumn("update");
dtUse.Columns.Add(dc);
if(dt!=null&&dt.Rows.Count>0)
{
DataRow dr ;
for(int i=0;i<dt.Rows.Count;i++)
{
object oid = dt.Rows[i]["StockPool_ssiStockCode"];
dr = dtUse.NewRow();
dr[0] = StockName(oid);
dr[1] = oid;
dr[2] = LoadNewPrice(oid);
dr[3] = dt.Rows[i]["StockPool_profitF"];
dr[4] = dt.Rows[i]["StockPool_profitS"];
dr[5] = LoadDTSYL(dt.Rows[i]["StockPool_ID"]);
dr[6] = dt.Rows[i]["StockPool_Level"];
dr[7] = Convert.ToDateTime(dt.Rows[i]["StockPool_update"].ToString()).ToString("yyyy-MM-dd");
dtUse.Rows.Add(dr);
}
}
return dtUse;
}