PS：
 
游戏公司后台开发，工作模式：996。
 
于是写博客这事也荒废了....
 

 
 
想想还是写一点吧。
 
呵呵，请不要笑话我注释写这么多，习惯了，我上班写代码都是有注释的。
 

 
 

 
 

 
 
我建两个相似的表是为了，给后台使用人员显示所操作的数据，同时方便把开发人员真正要操作的数据传到对应Action中，隐藏开发人员传参用的表。
 
运行效果：
 
只显示给管理系统使用人员看的表：（单击选中任意行即删除该行，修改相同道具个数直接修改表中对应行数据）
 
 

 
 
 
 

 
 
 

 
 

 
 
不隐藏传参表时效果：（单击选中任意行即删除该行，修改相同道具个数直接修改表中对应行数据）
 

 
 

 
 

 
 
隐藏表格实现：
 
 
 <style type="text/css">
    	 #tableNone{
    	 	   display:none;/*表格以整个表格形式隐藏*/
   		 }
 </style>

 

 
 
两个表格的定义：
 
id="hidden"是用来传值，确定选中行的隐藏域。
 
id="tableNone"是不显示的表。
 
 
 
<input type="hidden" value="" id="hidden" />
		    <li>
				<div style="padding-left:190px;">
					<table border="1" cellspacing="0" id="table"></table> 
	  			</div>
	  	    </li>
	  	    <li>
				<div style="padding-left:190px;">
					<table   border="1" cellspacing="0" id="tableNone"></table> 
	  			</div>
	  	    </li>
 

 
 

 
 

 
 
其余组件定义：
 
PS:
 
在此不讲述的：
 οnkeyup="searchCard(this)"是用来实现在“道具名、号”输入框中输入道具的名字或编号就让下拉菜单自动选中对应道具的。
 
 
id="choseNotice"的input框是用来验证输入内容是否符合要求的，输入符合要求时不显示。
 
 

 
 

 
 
<span style="font-family: Arial, Helvetica, sans-serif;"><strong style="font-size:13px;padding-left:120px;">道具名、号 </strong></span>
			<input type="text" style="width: 50px; margin: 2px;" value="" οnkeyup="searchCard(this)"/>
			<strong style="font-size:13px">道具个数 </strong>
			<input id="propNum" type="text" style="width: 50px; margin: 4px;" value=""/>
			<input type="button" value="添加" οnclick="addProp()" />
			<li><input size="40"; style="padding-left:190px; color:red;border-left:0px;border-top:0px;border-right:0px;border-bottom:1px;" id="choseNotice"/></li>

 

 
 
动态生成表格、选中删除任意行：
 
 
 //添加按钮点击事件
  	 	function addProp()
  	 	{
  	 	  //正则：非零和非零开头的数字：^([1-9][0-9]*)$
  	 	  var propNumReg = /^([1-9][0-9]*)$/;
  	   	  //得添加道具个数 
		  var propNum = $("#propNum").val();
		  //得道具的配置id
		  var propSid=$("#propList").val();
	   	  //得当前下拉菜单选中option的文本值
	   	  var options =$("#propList option:selected"); 
	   	  //没有选择道具不能添加
	   	  if(options.text()=="--请选择道具--")
	   	  {
	  	  	   $("#choseNotice").val("请选择道具。");
			  //显示是否选择道具提示框
			  $("#choseNotice").show();
			  return ;
	   	  }
	   	  //没有填写道具数量不能添加 
	   	  if(propNum == "")
	   	  {
	   	  	  $("#choseNotice").val("请填写道具数量。");
			  //显示是否选择道具提示框
			  $("#choseNotice").show();
			  return;
	   	  }else if(!propNumReg.test(propNum)){
			  $("#choseNotice").val("请填写零或非零开头的数字。");
			   //显示是否选择道具提示框
			  $("#choseNotice").show();
			  return;
		  }
	   	 //隐藏是否选择道具提示框
 		  $("#choseNotice").hide();
 		 //id选择器得表格中的行，行不存在，即该种道具没有添加过。加前辍是为了防止别的变量值刚好和表中id值一样。
 		 if($("#proptdid_"+propSid+"").html()==undefined)
 		 {
 		 	//动态生成tr
            var tr = "<tr id='proptrid_"+propSid+"' οnclick='choseWho("+propSid+")' style='font-size:13px;'><td id='proptdid_"+propSid+"'>"+options.text()+"*"+propNum+"</td></tr>";
  	  	    //隐藏表格每行内容为：  道具配置id*道具个数
  	  	    var trNone = "<tr id='propNone_"+propSid+"' οnclick='choseWho("+propSid+")' style='font-size:13px;'><td id='propNone_"+propSid+"'>"+propSid+"*"+propNum+"!"+"</td></tr>";
  	  	    
  	  	     //拼接表格
		     $("#table").append(tr);
		     $("#tableNone").append(trNone);
 		 }
         else
         {
         	//该行已经存在，直接修改该行显示内容。
            $("#proptdid_"+propSid+"").html(options.text()+"*"+propNum);
            //对隐藏表格作同样操作
            $("#propNone_"+propSid+"").html(options.text()+"*"+propNum);
         }
	   	   
//把选中行删除。
		 function choseWho(id){	
		  	 //删除选中行
		  	 $("#proptrid_"+id+"").remove();
		  	 //对隐藏表格作同样操作
		  	 $("#propNone_"+id+"").remove();
		 }

 

 隐藏表格每行内容多拼一个感叹号是为了服务端拿到数据便于拆分。 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

$("#tableId").click(function () {/** 批量删除*/
        $("input:checkbox[name='checkBox']:checked").each(function () {// 遍历选中的checkbox
            var n = $(this).parents("tr").index();  // 获取checkbox所在行的顺序
            delRow(n);
        });
    });

function delRow(n) {
        $("#tableId").find("tr:eq("+n+")").remove(); //移除选中的行
}
 
注：
 
获取表格的长度：   var length=$("#prepareProgram").find("tr").length;
 
jQuery进行类型强转：var rowIndex=parseInt(length)+1;   //将length强转后进行计算

 方法：采用以下语句：
 
dataGridView1.Rows.Remove(dataGridView1.CurrentRow);
 
 注意：该语句仅仅是删除表中的记录，并没有涉及到数据库中的。因此当你刷新再次加载时候，它还是存在的。
 
要彻底删除该数据，应该还要调用delete的SQL语句，进行删除；
 
最后，在重新加载以下这个DataGridView数据表，这样就达到了实时删除的效果了。
 
例如：
 
  private void button2_Click(object sender, EventArgs e)//删除
         {
             if (MessageBox.Show("您确定要删除该图书信息吗？", "信息提示", MessageBoxButtons.YesNo, MessageBoxIcon.Warning) == DialogResult.Yes)
             {
                 try
                 {
                     SqlClass sqlbook = new SqlClass();
                     sqlbook.sqlConnection.Open();
                     int a = -1;
                     //编写按ISBN号删除图书信息的SQL语句
                     string sql = "delete from bookinfo where id='{0}'";  //真正删除
                     //格式化删除图书信息的SQL语句
                     sql = string.Format(sql, dataGridView1.SelectedRows[0].Cells[0].Value.ToString());
                     //通过row.Cells[index].Value
                     //创建数据库操作类的对象
                     SqlCommand cmd = new SqlCommand(sql, sqlbook.sqlConnection);
                     a = cmd.ExecuteNonQuery();//执行命令
                     if (a == 1)
                     {
                         MessageBox.Show("删除图书信息成功！");
                         //刷新dataGridView表（自己实现，就是重新查询显示数据表）重写函数
                         //this.InitDataGridView();
                         dataGridView1.Rows.Remove(dataGridView1.CurrentRow);   //表格记录删除
                     }
                     else
                     {
                         MessageBox.Show("删除图书信息失败！");
                     }
                 }
                 catch
                 {
                     MessageBox.Show("请重新选择", "信息提示", MessageBoxButtons.OK, MessageBoxIcon.Warning);
                 }
             }
             
         }

Qt Model/View（模型/视图）结构
 
博主是基于QTableView实现的表格，并将QTableView的数据模型设置为QStandardItemModel标准数据模型。将数据展示在表格中
 
Widget.h头文件
 
// Widget.h

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = nullptr);
    QStandardItemModel *pstModel;           // 标准数据模型类
    QItemSelectionModel *pstSelectModel;    // 单元格选择状态类 可以选择单行/多行  可获取单元格的模型索引
    ~Widget();
    
};

 
Widget.cpp构造函数
 
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 表格每次显示的行数目 初始化
    iRowIndex = 0;

    // 浏览器控件显示
    initWidget();

    // 设置显示 tableView和浏览器控件 的底部窗口widget的相对位置    （效果没有调整好）
    ui->tabWidget->setGeometry(QRect(0, 0, 700, 800));
    // 设置tableView的相对位置
    ui->tableView->setGeometry(QRect(20, 40, 600, 680));

    // 设置初始当前页和所有页
    iCurrentPage = D_NSP_TDYTH_USMRS_CURRENT_PAGE;
    iAllPage = 9;              // 目前设定所有页面数目为20

    // 初始化标准数据模型类对象
    pstModel = new QStandardItemModel();
    // 初始化选择状态类对象
    pstSelectModel = new QItemSelectionModel(pstModel);
    // 为tableView设置数据模型和选择模型
    ui->tableView->setModel(pstModel);
    ui->tableView->setSelectionModel(pstSelectModel);
    //
    ui->tableView->setSelectionMode(QAbstractItemView::ExtendedSelection);
    ui->tableView->setSelectionBehavior(QAbstractItemView::SelectItems);
    // 设置表头
    pstModel->setHorizontalHeaderItem(0, new QStandardItem(QObject::tr("设备编号")));
    pstModel->setHorizontalHeaderItem(1, new QStandardItem(QObject::tr("设备名称")));
    pstModel->setHorizontalHeaderItem(2, new QStandardItem(QObject::tr("设备类型")));
    pstModel->setHorizontalHeaderItem(3, new QStandardItem(QObject::tr("*****")));
    pstModel->setHorizontalHeaderItem(4, new QStandardItem(QObject::tr("*****")));
    pstModel->setHorizontalHeaderItem(5, new QStandardItem(QObject::tr("*****")));
    pstModel->setHorizontalHeaderItem(6, new QStandardItem(QObject::tr("*****")));
    pstModel->setHorizontalHeaderItem(7, new QStandardItem(QObject::tr("*****")));
    pstModel->setHorizontalHeaderItem(8, new QStandardItem(QObject::tr("帐号")));
    pstModel->setHorizontalHeaderItem(9, new QStandardItem(QObject::tr("密码")));
    pstModel->setHorizontalHeaderItem(10, new QStandardItem(QObject::tr("*****")));
    pstModel->setHorizontalHeaderItem(11, new QStandardItem(QObject::tr("*****")));
    pstModel->setHorizontalHeaderItem(12, new QStandardItem(QObject::tr("*****")));
    pstModel->setHorizontalHeaderItem(13, new QStandardItem(QObject::tr("联系方式")));
    

    // 设置每一列的固定宽度 默认设置每一列的宽度为100
    // ui->tableView->setColumnWidth(0,250);
    // 表格总体宽度自适应窗口宽度
    // ui->tableView->horizontalHeader()->setStretchLastSection(true);
    // ui->tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);

    // 行头显示和隐藏
    ui->tableView->verticalHeader()->hide();

    // 设置选中为整行选中
    ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows);

    // 设置单元格为只读 不能编辑
    // ui->tableView->setEditTriggers(QAbstractItemView::NoEditTriggers);

    // 启动 右键菜单
    ui->tableView->setContextMenuPolicy(Qt::CustomContextMenu);

    // 动态添加行
    // pstModel->setItem(0, 0, new QStandardItem("张三"));
    // pstModel->setItem(0, 1, new QStandardItem("2013014221"));

    // 显示数据样式

    // 更新界面显示状态
    updateStatus();
}
 
 
 
核心的语句
 这里需要设置选择的行为：为选中一行，后面删除的时候选中的单元也是整行。
 
 
    // 初始化标准数据模型类对象
    pstModel = new QStandardItemModel();
    // 初始化选择状态类对象
    pstSelectModel = new QItemSelectionModel(pstModel);
    // 为tableView设置数据模型和选择模型
    ui->tableView->setModel(pstModel);
    ui->tableView->setSelectionModel(pstSelectModel);
    //
    ui->tableView->setSelectionMode(QAbstractItemView::ExtendedSelection);
    ui->tableView->setSelectionBehavior(QAbstractItemView::SelectItems);
    
    // 设置选中为整行选中
    ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows);
 
WIdget.cpp 实现删除按钮相应函数
 
// 对表格内的行进行删除
void Widget::on_pushButton_Delete_clicked()
{
    /*
     * selectedIndexes();   // 以单元格作为List连接单元
     * selectedColumns();   // 以列作为List连接单元
     * selectedRows();      // 以行作为List连接单元
    */
    unsigned int uiRowsSort[NUM_PERPAGE] = {'\0'};
    QModelIndexList curIndexList = pstSelectModel->selectedRows();
    QModelIndex index;
    int k1 = 0;
    // 界面上显示删除单行的操作 实际上数据库中没有删除
    //QModelIndex curIndex = pstSelectModel->currentIndex();
    //pstModel->removeRow(curIndex.row());

    foreach(index, curIndexList){
        // 这里直接执行remove 删除一行之后 后面的行号发生变化 导致删除出现问题
        uiRowsSort[k1++] = index.row();
        printf("Index.Row = %d\tIndex.column = %d\n", index.row(), index.column());

    }
    // 逆序排序后从后往前删除 解决前面删除行导致后面行号出现的删除异常问题
    array_Sort(uiRowsSort, k1);
    for(int i = 0; i < k1; i++){
        // printf("%d\n", uiRowsSort[i]);
        pstModel->removeRow(uiRowsSort[i]);
    }

    /*
    for(int k1 = 0; k1 < curIndexList.count(); k1++){
        QModelIndex aIndex = curIndexList.at(k1);
        printf("Index.Row = %d\tIndex.column = %d\n", aIndex.row(), aIndex.column());
        // pstModel->removeRow(aIndex.row());
    }*/
    //pstModel->removeRows(curIndex.row(), 3);


    return ;
}
 
 
 
这里主要记录删除单行的操作和删除多行的操作遇到的问题及解决方法。
 
 
单行的实现方法：
 
    QModelIndex curIndex = pstSelectModel->currentIndex();
    pstModel->removeRow(curIndex.row());
 
选择当前行作为需要删除的行，执行数据模型对象的removeRow()操作，removeRow()参数是待删除的行号，current.row()即为获取到待删除的行号。
 
多行的实现方法：
 
    /*
     * selectedIndexes();   // 以单元格作为List连接单元
     * selectedColumns();   // 以列作为List连接单元
     * selectedRows();      // 以行作为List连接单元
    */
    QModelIndexList curIndexList = pstSelectModel->selectedRows();
    QModelIndex index;
 
这里需要清除QModelIndexList类型，是一个QList类型，它所调用的API中selectedIndexes、selectedRows、selectedColumns分别表示的功能是以单元格/一行/一列作为List的一个元素进行链接，因此对整行进行操作使用selectedRows这个API。
 
遇到的问题：
 
删除多行时，删除了当前行，整个pstModel会进行调整，也即是已经选择的行号，在删除一行之后在调整后的pstModel中会变化，导致删除出现异常。
 
比如先选择了5,6行，又选择了2,3行，最后选择了8,9行，则获取的行号输出的顺序就是5,6,2,3,8,9,这样就存在一个问题，在执行删除的时候就有问题，执行的删除工作是单独一行执行的，如果按照获取行号的顺序进行删除，删除完一行以后，整个列表的行号就会发生改变，再按前面获取的行号进行删除，删除的结果就会乱套。
 
解决方法：
 
获取所有需要删除的行，将行号倒序排列，从后往前删除行，删除后面的行不会影响到前面待删除的行号。具体实现如下：
 
    foreach(index, curIndexList){
        // 这里直接执行remove 删除一行之后 后面的行号发生变化 导致删除出现问题
        uiRowsSort[k1++] = index.row();
        printf("Index.Row = %d\tIndex.column = %d\n", index.row(), index.column());

    }
    // 逆序排序后从后往前删除 解决前面删除行导致后面行号出现的删除异常问题
    array_Sort(uiRowsSort, k1);
    for(int i = 0; i < k1; i++){
        // printf("%d\n", uiRowsSort[i]);
        pstModel->removeRow(uiRowsSort[i]);
    }
 
代替foreach的for循环也可以如下实现
 
    for(int k1 = 0; k1 < curIndexList.count(); k1++){
        QModelIndex aIndex = curIndexList.at(k1);
        printf("Index.Row = %d\tIndex.column = %d\n", aIndex.row(), aIndex.column());
        // pstModel->removeRow(aIndex.row());
    }
 
结束语
 
 
 
遇到类似问题，可以留言私信交流，如博文存在问题请批评指正！