如何在Datatables中进行colspan rowspan？

Question

我正在尝试将#include<opencv2/opencv.hpp> #include<iostream> #include<math.h> #include<stdlib.h>//rand()随机数头文件 #include <windows.h> using namespace cv; using namespace std; //全局变量定义区 Mat srcImage; Mat dstImage; Mat Character; static int i = 0; //get_screenshot();获取手机上的图像 void get_screenshot(); //Canny_Dec();边缘检测 void Canny_Dec(Mat& srcImage); //获取Character坐标 Point get_Character_Loc(Mat& srcImage, Mat& Tem_img); //获取下一个要跳的点 Point get_next_img_Loc(Mat& srcImage, Point& Character_Loc); //计算距离 int get_distance(Point& first_point, Point& next_point); //跳跃 void jump(int&g_distance); int main(int argc, char** argv) { system("color 3F"); while (true) { get_screenshot(); srcImage = imread("autojump.png"); dstImage = srcImage.clone(); Character = imread("./Template/character.png"); //imshow("Character",Character); //cvtColor(srcImage,srcImage,CV_BGR2GRAY); Point next_p = get_Character_Loc(srcImage, Character); //cout<<"next_p:"<<1111<<endl; Point get_next = get_next_img_Loc(srcImage, next_p); int g_distance = get_distance(next_p, get_next); jump(g_distance); //cout<<"get_next_img_Loc:"<<get_next<<endl; circle(dstImage, get_next, 8, Scalar(0, 221, 2)); //imshow("test",dstImage); imwrite("Canny.png", dstImage); Sleep(1000); } return 0; } void get_screenshot() { system("adb shell screencap -p /sdcard/autojump.png"); system("adb pull /sdcard/autojump.png"); } Point get_Character_Loc(Mat& srcImage, Mat& Tem_img) { matchTemplate(srcImage, Tem_img, dstImage, CV_TM_SQDIFF); double minVal, maxVal; Point minLoc, maxLoc, matchLoc; minMaxLoc(dstImage, &minVal, &maxVal, &minLoc, &maxLoc, Mat()); matchLoc = minLoc; //matchLoc是最佳匹配的区域左上角点 cout << "maxVal:" << maxVal << endl; rectangle(srcImage, Rect(matchLoc, Size(Character.cols, Character.rows)), Scalar(255, 255, 0), 1, 8, 0); //Canny(srcImage,srcImage,1,10); putText(srcImage, "Wang", Point(matchLoc.x + Character.cols*0.5, matchLoc.y + Character.rows), 1, 2, Scalar(0, 0, 255));//画出Character小人的坐标 return Point(matchLoc.x + Character.cols*0.5, matchLoc.y + Character.rows); } Point get_next_img_Loc(Mat& srcImage, Point& Character_Loc) { cout << "get_next_img_Loc" << endl; cvtColor(srcImage, srcImage, CV_BGR2GRAY); GaussianBlur(srcImage, srcImage, Size(3, 3), 0); Canny(srcImage, srcImage, 3, 8); char AA[30]; sprintf(AA, "get_next_img_Loc_%d.png", i); cout << AA << endl; imwrite(AA, srcImage); i++; //imshow("get",srcImage); cout << "Character_Loc.x:" << Character_Loc.x << endl; if (Character_Loc.x < 540) { for (int j = int(srcImage.rows*0.2);j<int(srcImage.rows*0.8);j++) { uchar* data = srcImage.ptr<uchar>(j); for (int i = 1079;i > 540;i--) { if (data[i] == 255) { return Point(i, j); //cout<<"Point:"<<Point(i,j)<<endl; } } } } else { for (int j = int(srcImage.rows*0.2);j<int(srcImage.rows*0.8);j++) { uchar* data = srcImage.ptr<uchar>(j); for (int i = 0;i<540;i++) { if (data[i] == 255) return Point(i, j); } } } return Character_Loc; } int get_distance(Point& first_point, Point& next_point) { int A = first_point.x - next_point.x; int B = first_point.y - (next_point.y + 50); return int(pow(pow(A, 2) + pow(B, 2), 0.5)); } void jump(int&g_distance) { char AA[50]; int distance_ = g_distance * 1.35; int rand_x = int(320 + rand() % 50); //加上随机数使得每次按压都是在点（320,410）-（370,460）之间 int rand_y = int(410 + rand() % 50); sprintf(AA, "adb shell input swipe %d %d %d %d %d", rand_x, rand_y, rand_x, rand_y, distance_); cout << AA << endl; system(AA); } 和colspan属性与jQuery Datatables一起使用，其中产品sku可以跨越2行，一周可以跨越2列创建一个看起来像这样的表。

这可能吗？

Answer 1

我担心这不可行。 （可能是Colspan，但是对于DT的想法，rowpan只是如此之多，以至于它不可能）。

然而，查看表格我想知道你是否不能将4个值组合成一个单元格，例如＆＃34; KPI1，KPI2，KPI3，KPI4＆＃34;。您甚至可以将这4个值显示为if(isset($fieldArray['t3_origuid']) { <your_code> } ，每个值都链接到不同的详细信息页面等。使用自定义href时，有很多可能的功能，请查看https://datatables.net/reference/option/columns.render

Answer 2

jQuery DataTables支持表头中的ROWSPAN和COLSPAN属性，只要每列至少有一个单元格即可。有关详细信息和演示，请参阅Complex header示例。

默认情况下，jQuery DataTables插件不支持表正文中的ROWSPAN和COLSPAN属性。

然而，jQuery DataTables有一个RowsGroup插件，它将单元格组合在一起，使它们看起来就像使用了ROWSPAN属性一样。

请参阅this example以获取代码和演示。

有关详细信息，请参阅jQuery DataTables – ROWSPAN in table body TBODY。