none
GridView如何实现多选 RRS feed

  • 常规讨论

  • 图片

    现在需要实现如上效果,在gridview上单击某一行,实现选中或取消选中某一行,然后再通过页面上的功能按钮来对选中行作相应操作,如(删除)

    实现路如下:

    1、在服务器端程序中,RowDataBound事件中,对每一行数据进行JS脚本事件绑定

            protected void GridViewUnread_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    boundScriptToCell(e);
                }
            }

            private void boundScriptToCell(GridViewRowEventArgs e)
            {
                e.Row.Attributes.Add("id", e.Row.ClientID);
                e.Row.Attributes.Add("onclick", string.Format("AddOrRemove('{0}','{1}')", ((UserTask)e.Row.DataItem).TaskID, e.Row.ClientID));
            }

    2、用页面的JS程序来实现,选中或取消选中行,实现思路就是每单击一行时,将该行的数据值(主键)用字符串相加的方式,存放到页面某一隐藏r的服务端控件中,取消选中某一行时,反之从控件值中删除该行主键值(注意JS脚本位置须放在页面底部,要不然页面控件元素未加载完成,JS会报错)

    <script type="text/javascript">
     //向ForMove控件中添加数据,或者删除数据
      function AddOrRemove(ForMoveTaskID,rowid)
      {

       var index = document.getElementById("<%=UnreadTaskID.ClientID%>").value.indexOf(ForMoveTaskID+"#");
       if(index == -1)
       {
        document.getElementById(rowid).style.backgroundColor = "#FFEBBB";
        document.getElementById("<%=UnreadTaskID.ClientID%>").value +=ForMoveTaskID+"#";
       }
       else
       {
                    document.getElementById(rowid).style.backgroundColor = "";
        var temp = document.getElementById("<%=UnreadTaskID.ClientID%>").value;
        document.getElementById("<%=UnreadTaskID.ClientID%>").value = temp.replace(ForMoveTaskID+"#","");
       }
       ShowButton();
      }
      //根据选定内容决定是否显示提交按钮
      function ShowButton()
      {
       if(document.getElementById("<%=UnreadTaskID.ClientID%>").value == "")
        {
         document.getElementById("<%=DoMoveButton.ClientID%>").style.visibility="hidden";
        }
        else
        {
         document.getElementById("<%=DoMoveButton.ClientID%>").style.visibility="visible";
        }
      }
    </script>

    3、功能按钮,实现操作,这个就跟普通按钮一样,写一个服务器端click事件,事件触发后,直接从存储选中值的那个服务端控件中取出值,然后再进行相应操作就行了。

    protected void DoMoveButton_Click(object sender, EventArgs e)
      {
       string[] TaskIDs = this.UnreadTaskID.Value.Split('#');

      //操作去吧

    }


    沙漠风暴
    2010年5月20日 9:43