安排表格行Sikuli动态地

huangapple go评论97阅读模式
英文:

Arrange rows Of A Table Sikuli Dynamically

问题

我有一个HTML页面,类似于这样:

<style type="text/css">
  body {
    font-size: 14px;
  }

  .drag-handler {
    width: 8em;
    position: relative;
    background-color: #E4E6EB;
    background-image: linear-gradient(45deg, #E4E6EB, #E4E6EB 2px, #fff 2px, #fff 4px, #E4E6EB 4px, #E4E6EB 9px, #fff 9px, #fff 11px, #E4E6EB 11px, #E4E6EB 16px, #fff 16px, #fff 18px, #E4E6EB 18px, #E4E6EB 22px);
    background-size: 10px 20px;
    cursor: move;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
  }

  .drag-handler:active {
    background-image: linear-gradient(45deg, #bab86c, #bab86c 2px, #fff 2px, #fff 4px, #bab86c 4px, #bab86c 9px, #fff 9px, #fff 11px, #bab86c 11px, #bab86c 16px, #fff 16px, #fff 18px, #bab86c 18px, #bab86c 22px);
    background-size: 10px 20px;
  }
</style>
<table class="table table-hover table-striped">
  <thead>
    <tr>
      <th>
        拖动按钮
      </th>
      <th>
        数字
      </th>
      <th>
        Jabcode
      </th>
    </tr>
  </thead>

  <tbody id="sortable">
    <tr>
      <td class="ui-state-default drag-handler"></td>
      <td>1</td>
      <td>E24.9</td>
    </tr>
    <tr>
      <td class="ui-state-default drag-handler"></td>
      <td>2</td>
      <td>J92.9</td>
    </tr>
    <!-- 其他行... -->
  </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#sortable").sortable({
      handle: ".drag-handler"
    });
    $("#sortable").disableSelection();
  });
</script>

我想要动态排列行,是否有使用Sikuli来实现的方法?我已经使用Selenium实现了这一功能,但是否有不使用Selenium的方法?

链接到我的Selenium问题:https://stackoverflow.com/questions/59615492/drag-by-specific-column-sort-the-table-python-selenium

英文:

I have a html page like this

&lt;style type=&quot;text/css&quot;&gt;
body {
font-size: 14px;
}
.drag-handler {
width: 8em;
position: relative;
background-color: #E4E6EB;
background-image: linear-gradient(45deg, #E4E6EB, #E4E6EB 2px, #fff 2px, #fff 4px, #E4E6EB 4px, #E4E6EB 9px, #fff 9px, #fff 11px, #E4E6EB 11px, #E4E6EB 16px, #fff 16px, #fff 18px, #E4E6EB 18px, #E4E6EB 22px);
background-size: 10px 20px;
cursor: move;
border-top: 2px solid #FFF;
border-bottom: 2px solid #FFF;
}
.drag-handler:active {
background-image: linear-gradient(45deg, #bab86c, #bab86c 2px, #fff 2px, #fff 4px, #bab86c 4px, #bab86c 9px, #fff 9px, #fff 11px, #bab86c 11px, #bab86c 16px, #fff 16px, #fff 18px, #bab86c 18px, #bab86c 22px);
background-size: 10px 20px;
}
&lt;/style&gt;
&lt;table class=&quot;table table-hover table-striped&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;
Drag Button
&lt;/th&gt;
&lt;th&gt;
Number
&lt;/th&gt;
&lt;th&gt;
Jabcode
&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody id=&quot;sortable&quot;&gt;
&lt;tr&gt;
&lt;td class=&quot;ui-state-default drag-handler&quot; &gt;&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;E24.9&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;ui-state-default drag-handler&quot; &gt;&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;J92.9&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;ui-state-default drag-handler&quot; &gt;&lt;/td&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;A10.2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;ui-state-default drag-handler&quot; &gt;&lt;/td&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;td&gt;B10.2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;ui-state-default drag-handler&quot; &gt;&lt;/td&gt;
&lt;td&gt;5&lt;/td&gt;
&lt;td&gt;C4.9&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;ui-state-default drag-handler&quot; &gt;&lt;/td&gt;
&lt;td&gt;6&lt;/td&gt;
&lt;td&gt;D10.11&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;ui-state-default drag-handler&quot; &gt;&lt;/td&gt;
&lt;td&gt;7&lt;/td&gt;
&lt;td&gt;F19.10&lt;/td&gt;             
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;ui-state-default drag-handler&quot; &gt;&lt;/td&gt;
&lt;td&gt;8&lt;/td&gt;
&lt;td&gt;Z20.2&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt; 
&lt;script src=&quot;https://code.jquery.com/ui/1.12.0/jquery-ui.min.js&quot;&gt;&lt;/script&gt; 
&lt;script src=&quot;https://getbootstrap.com/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&quot;#sortable&quot;).sortable({
handle: &quot;.drag-handler&quot;
});
$(&quot;#sortable&quot;).disableSelection();
});
&lt;/script&gt;

I want to arrange rows dynamically is there any way to do it in sikuli ? I have achieved using selenium but is there any way to do it with out selenium ?

Link to my selenium problem :- https://stackoverflow.com/questions/59615492/drag-by-specific-column-sort-the-table-python-selenium

答案1

得分: 1

这是一个示例,说明如何重新排列行。
https://www.screencast.com/t/2SmZ9lSz

代码显示如何找到所有按钮并将它们移动到第一个位置。(默认情况下,列表不是有序的)

您可以扩展这个功能:
您可以按Y坐标对接收到的列表进行排序,然后可以按它们的可见顺序操纵各个项。

英文:

Here is an example how you can reorder rows
https://www.screencast.com/t/2SmZ9lSz

Code shows how to found all buttons and move them on the first place.(by default list is not ordered)

How you can extend this:
You can sort received list by Y and then you can manipulate individual items by their visible order

huangapple
  • 本文由 发表于 2020年7月29日 07:28:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/63144223.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定