jquery *** 作table节点问题

选取出以前表格里面的数据，存入变量中，然后

选择table,设置其HTML

$("#tableId")html("<tr><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td></tr>

<tr><td></td><td></td><td></td><td></td></tr>");

把变量放到对应的TD中

之所以会造成卡顿，是因为该组件是一次性将所有数据全部渲染，dom数量过于庞大，并且在展开树 *** 作的时候，用了大量递归循环语句，性能受到严重影响，造成卡顿。

我想到的解决方式有两种：

一：分页，让后端添加分页查询，以节点数统计数据条数进行展示。（但实际需求中较少，一般树形表格都是不分页）。

二：将请求到的树形数组数据备份（tableDataCopy），初始化仅仅展示指定层级（如第一层树）的数据，将第一层下面的所有的children全部置为null，并记录存在children的节点，设置hasChild的状态，判断是否存在子节点。这样就不会在初始化页面时展示完所有数据，实现按需加载。

        以上仅仅能满足展示功能，当存在 *** 作节点上移下移/删除/编辑等 *** 作的情况下，展示的节点就不能同步刷新（因为备份数据不能双向数据绑定了）。处理办法：更新节点（两种方式，第一种使用render()来实现，第二种是给表格绑定key（利用diff算法），只要 *** 作了数据，就改变key就能实现节点更新）。

请求数据和展开代码如下：

// 获取树形列表

getList(active) {

thisloading = true;

let data = Objectassign({}, thissearchForm);

APIgetDepartmentListAll(data)

then((res) => {

// thistableData = resdata;

thisexpandRowpush(resdata[0]id); //默认展开

thistableDataCopy = resdata || [] // 备份的全量数据

if (active) { //是否是 *** 作按钮点击的数据

thistableData = thiscommonJsmapNewTableData(resdata,thisexpandRow); //展开已展开的数据

} else {

thistableData = thiscommonJsmapNewTableData(resdata,resdata[0]id); //默认展开第一层

}

thiscomponentKey += 1; //销毁更新dom

})finally(() => {

thisloading = false;

thisgetTableHeight();

})

},

// 展开按钮

getChildrens(tree, treeNode, resolve) {

let data = Objectassign({}, thissearchForm, {

deptId: treeid

});

APIgetDepartmentListAll(data) //传入展开按钮层级节点的id，获取子节点

then((res) => {

thistableDatas = JSONparse(JSONstringify(resdatachildren))map(item => { // 展示数据

// hasChildren 表示需要展示一个箭头图标

itemhasChildren = itemchildren && itemchildrenlength > 0

// 只展示一层也可以配置tree-props里面的children为其他字段

itemchildren = null

// 记住层级关系

itemidList = [itemid]

return item

})

resolve(thistableDatas)

})

},

登录后复制

当存在 *** 作按钮，数据更新后，利用上述key更新节点后 ，会将展开的状态初始为初次进度页面的状态，不能停留在 *** 作的节点。解决方法：可以在点击 *** 作按钮的时候，使用findParentNode方法递归查询到该节点所有的祖先节点id并记录（expandRow，该变量也是树形表格:expand-row-keys默认展开的数据），然后再请求刷新数据时，通过mapNewTableData()方法递归处理将对应的祖先节点id对应的children给展示处理，其他的节点还是一样的置为null。代码如下：

/

@param 递归，当前节点的祖先节点id数组（包含自身）

acceptUnitNodes树状结构数据，ids当前节点的id

/

findParentNode(acceptUnitNodes, ids) {

var parentNodes = [] // 所有父节点

var forfun = function(id, nodes) {

for (var i = 0; i < nodeslength; i++) {

var currentNode = nodes[i]

if (currentNodeid === id) {

return currentNodeid

} else if (currentNodechildren) {

var validNodeId = forfun(id, currentNodechildren)

if (validNodeId && parentNodesindexOf(validNodeId) < 0) {

parentNodespush(validNodeId)

}

if (validNodeId) {

return currentNodeid

}

}

}

}

var validNodeId = forfun(ids, acceptUnitNodes)

if (validNodeId && parentNodesindexOf(validNodeId) < 0) {

parentNodespush(validNodeId)

}

return parentNodes

},

//递归处理数据，当有展开记录的时候，将有展开记录的数据的子节点显示出来

mapNewTableData(data, pidArr) {

let dataNew = JSONparse(JSONstringify(data));

function mapNewArr(dataNew, pidArr) {

dataNewmap(item => {

if (pidArrindexOf(itemid) === -1) {

itemidList = [itemid]

itemhasChildren = true

itemchildren = null

// 记住层级关系

return item;

} else {

mapNewArr(itemchildren, pidArr)

}

})

return dataNew;

}

mapNewArr(dataNew, pidArr);

return mapNewArr(dataNew, pidArr);;

},

登录后复制

*** 作按钮：

//上移//下移

upDownLayer(index, row, type) {

thisexpandRow = (thiscommonJsfindParentNode(thistableDataCopy, rowid))splice(1); //调工具，获取点击当前节点的祖先节点id数组。

let loading = Loadingservice({

target: documentquerySelector("tableBox"),

});

可能一个查询语句是完成不了你这个东西了。

DECLARE

CURSOR V_CURSOR IS

SELECT FROM TABLE_TEST;

V_COUNT NUMBER;

BEGIN

FOR C1 IN V_CURSOR LOOP

SELECT COUNT(1)

INTO V_COUNT

FROM TABLE_TEST A

START WITH AID = C1ID

CONNECT BY PRIOR AID = APID;

DBMS_OUTPUTPUT_LINE(C1NAME || ',' || V_COUNT);

END LOOP;

END;

你可以使用 JavaScript 中自带的 rowIndex 和 cellIndex 来获取行和列的键值 (从0开始)

点击 checkbox，获取 parentNode (也就是 td)，tdcellIndex 就是所在列的键值

点击 checkbox，获取 parentNodeparentNode (也就是 tr)，trrowIndex 就是所在行的键值

<script type="text/javascript">

// 点击

documentonclick = function(e) {

    // 兼容 event 和 target

    e = e || windowevent;

    var target = etarget || esrcElement;

    // 确认是 checkbox

    if(targettagNametoLowerCase() === "input"

        && targettype === "checkbox") {

        // 获取行列键值

        var row_num = targetparentNodeparentNoderowIndex;

        var col_num = targetparentNodecellIndex;

        // 输出

        alert(row_num + " " + col_num);

    }

};

</script>

因为键值是从 0 开始，一般需要 +1 才是行列数，但因为你表单中第一行个第一列都是文字，所以不需要 +1 正好输出需要的数字，例如点击周四 + 6，会输出 4 6

// 查找人员

private void button4_Click(object sender, EventArgs e)

{

string username = thistextBox1TextToString()Trim();

if (username == "")

return;

TreeNodeCollection tc = treeView1Nodes;

thistreeView1CollapseAll();

FindUser(tc, username);

}

private void FindUser(TreeNodeCollection tc,string username)

{

foreach (TreeNode Node in tc)

{

if (NodeTextIndexOf(username) >= 0)

{

thistreeView1SelectedNode = Node;

NodeForeColor = ColorOrange;

}

FindUser(NodeNodes, username);

}

}

一个遍历Treeview节点查找节点名字的例子，

其实就是递归循环所有节点

希望对你有用。如果还有问题可以发消息

以上就是关于jquery *** 作table节点问题全部的内容，包括:jquery *** 作table节点问题、elementui表格更新卡住、Oracle 查询所有树节点的包含的子节点的数量等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！