主页 / user-10847401

pileup's questions

Martin Hope
pileup
Asked: 2025-04-29 14:40:03 +0800 CST
  • 5

我不确定这里显示的登录 URL 有什么用处：

https://learn.microsoft.com/en-us/entra/identity/enterprise-apps/media/add-application-portal-setup-sso/saml-configuration.png

（来源：https ://learn.microsoft.com/en-us/entra/identity/enterprise-apps/add-application-portal-setup-sso ）

编辑：在上图中，登录 URL 标记为required，但在我的例子中它显示为optional。

据我了解，如果我设置了此 URL，它将把 SAML 响应重定向回此 URL 而不是 ACS，以便在 SP 端进一步登录。

因此，例如，如果我的应用程序在通过 IDP 身份验证后需要登录页面，它将重定向到登录页面。

但是为什么我不能只使用 ACS 重定向到登录页面？

Martin Hope
pileup
Asked: 2024-11-06 22:06:04 +0800 CST
  • 5

我有一个公司层次结构的对象数组，需要将其发送到后端：

selectedTeams: [
  0: {team: "some_team_1", division: "some_division_1"}
  1: {team: "some_team_2", division: "some_division_2"}
  2: {team: "some_team_3", division: "some_division_3"}
]

我正在尝试使用以下命令执行以下操作URLSearchParams：

const urlParams = new URLSearchParams();
urlParams.append('selected_teams', selectedTeams)
fetch(`${backendUrl}?` + urlParams)
  .then(..)

但这是null因为它显然不正确。

正确的做法是什么？如果需要，我可以更改数据类型（例如，将其从对象数组更改为对象对象等）。

javascript
Martin Hope
pileup
Asked: 2024-09-04 02:07:14 +0800 CST
  • 5

我按照这个例子创建了一个带有圆形标记点的简单地图：https://openlayers.org/en/latest/examples/icon-color.html

这是我当前的代码：

import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import Point from 'ol/geom/Point.js';
import View from 'ol/View.js';
import {Icon, Style} from 'ol/style.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {fromLonLat} from 'ol/proj.js';

const rome = new Feature({
  geometry: new Point(fromLonLat([12.5, 41.9])),
});

rome.setStyle(
  new Style({
    image: new Icon({
      color: '#BADA55',
      crossOrigin: 'anonymous',
      src: 'data/dot.svg',
    }),
  }),
);

const vectorSource = new VectorSource({
  features: [rome],
});

const vectorLayer = new VectorLayer({
  source: vectorSource,
});

const tileLayer = new TileLayer({
  source: new OSM()
});

const map = new Map({
  layers: [tileLayer, vectorLayer],
  target: document.getElementById('map'),
  view: new View({
    center: fromLonLat([2.896372, 44.6024]),
    zoom: 3,
  }),
});

现在我希望能够单击该点并根据新的经度和纬度将其位置更改为新点。

我已经在文档中查找了 Point：https://openlayers.org/en/latest/apidoc/module-ol_geom_Point-Point.html

但它们确实令人困惑，我找不到使上述点可点击并移动到新位置的方法（在这种情况下，我只想根据固定的经度和纬度将其移动到附近的位置）

这些文档真的很混乱

openlayers
Martin Hope
pileup
Asked: 2024-05-25 16:15:30 +0800 CST
  • 5

我制作了一个带有可调整大小的列的表格。我正在设置元素的宽度th。但看起来它不允许我将宽度设置为低于最长的宽度td。

我想要做的是将列的大小调整为最小值。

允许td小于内容的有效方法是设置max-width，但是我不想有max-width. 如果我没记错的话，min-width在桌子上不起作用。

我有什么可以做的吗？或者在这种情况下，最好尝试使用 CSS 网格创建表格？

我的目标是允许调整列的大小低于th和td内容并显示省略号（使用...）

activateTableResize();

function activateTableResize() {
  let table, tableContainer, resizeable, currentResizeBar, currentTh, tableFirstRow, tableRect, currentResizeBarRect;
  document.addEventListener("mousedown", (event) => {
    if (event.target.closest('.resize-bar')) {
      resizeable = true;
      currentResizeBar = event.target;
      currentTh = event.target.closest('th');
      table = document.getElementById('my-table');
      tableContainer = document.getElementById('my-table-container');
      tableFirstRow = table.querySelector('tbody tr');
      tableRect = tableContainer.getBoundingClientRect();
      currentResizeBarRect = currentResizeBar.getBoundingClientRect();
      document.querySelector("body").style.cursor = "col-resize";
      document.querySelector("body").style.userSelect = "none";
    }
  });

  document.addEventListener("mousemove", (event) => {
    if (resizeable) {
      if (event.clientX + 5 < tableContainer.getBoundingClientRect().right) {
        let distanceMoved = event.clientX - currentTh.getBoundingClientRect().x;
        currentTh.style.width = `${distanceMoved}px`;
      }
    }
  });

  document.addEventListener("mouseup", (event) => {
    document.querySelector("body").style.cursor = "default";
    document.querySelector("body").style.userSelect = "default";
    resizeable = false;
  });
}
#my-table-container {}

#my-table {
  margin: 0;
  padding: 0;
  text-align: left;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

#my-table thead {
  border-top: 2px solid rgb(140 140 140);
  border-left: 2px solid rgb(140 140 140);
}

#my-table th {
  position: relative;
  margin: 0;
  padding: 0;
}

#my-table th:first-child {
  width: 150px;
}

#my-table th .resize-bar {
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: black;
  cursor: col-resize;
}

#my-table tbody td div.cell-container,
#my-table thead th div.cell-container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div id="my-table-container">
  <table id="my-table">
    <thead>
      <tr>
        <th scope="col">
          <div class="cell-container">Name<span class="resize-bar"><span></div></th>
                <th scope="col"><div class="cell-container">Type<span class="resize-bar"><span></div></th>
                <th scope="col"><div class="cell-container">Size<span class="resize-bar"></span></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="cell-container">James Smith</div>
        </td>
        <td>
          <div class="cell-container">20</div>
        </td>
        <td>
          <div class="cell-container">[email protected]</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="cell-container">Jane Doe</div>
        </td>
        <td>
          <div class="cell-container">19</div>
        </td>
        <td>
          <div class="cell-container">[email protected]</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

javascript
Martin Hope
pileup
Asked: 2024-05-22 05:29:49 +0800 CST
  • 5
我想为每个分类的行添加计数，但在分页时，每页的计数都从0开始，这与常规查询不同。常规查询时工作正常。 例如，我有以下表格： ``` id | category_id | item_id | created_at ---|-------------|---------|------------ 7 | 11 | 106 | 2024-05-06 6 | 3 | 102 | 2024-05-06 5 | 11 | 101 | 2024-05-05 4 | 9 | 98 | 2024-05-04 3 | 3 | 97 | 2024-05-03 2 | 1 | 91 | 2024-05-02 1 | 11 | 89 | 2024-05-01 ``` 我想根据创建日期计算`item_id`在其分类中的顺序。 为此，我使用了以下查询： ```sql DB::('table')->select( table.*, DB::raw('ROW_NUMBER() OVER(PARTITION BY category_id ORDER BY created_at) as order') )->get(); ``` 这与以下原始查询相同： ```sql SELECT table.*, ROW_NUMBER() OVER(PARTITION BY category_id ORDER BY created_at) as order FROM table ``` 结果如下： ``` id | category_id | item_id | created_at | order ---|-------------|---------|------------|------- 7 | 11 | 106 | 2024-05-06 | 3 6 | 3 | 102 | 2024-05-06 | 2 5 | 11 | 101 | 2024-05-05 | 2 4 | 9 | 98 | 2024-05-04 | 1 3 | 3 | 97 | 2024-05-03 | 1 2 | 1 | 91 | 2024-05-02 | 1 1 | 11 | 89 | 2024-05-01 | 1 ``` 但这在分页时不起作用，因为每页都有自己的子集，计数从另一行开始。例如，如果我把上面的表格每4个结果分页，最终得到2页，那么第2页的结果将是： ``` id | category_id | item_id | created_at | order ---|-------------|---------|------------|------- 7 | 11 | 106 | 2024-05-06 | 2 6 | 3 | 102 | 2024-05-06 | 1 5 | 11 | 101 | 2024-05-05 | 1 ``` 但我希望它是： ``` id | category_id | item_id | created_at | order ---|-------------|---------|------------|------- 7 | 11 | 106 | 2024-05-06 | 3 6 | 3 | 102 | 2024-05-06 | 2 5 | 11 | 101 | 2024-05-05 | 2 ``` 我该怎么做呢？
sql
Martin Hope
pileup
Asked: 2024-01-09 20:43:24 +0800 CST
  • 6

如何检测单击是否位于其侦听器被类选择的元素内部？

例如，我有一些类名为“my-class”的元素：

<div class="my-class">
    <button>Hello</button>
    <p>World</p>
</div>
<div class="my-class">
    <a href="">Click</a>
    <a href="">Here</a>
</div>

如果我只听课，如果点击内部元素，它将不起作用：

document.addEventListener("click", function(event) {
    if(event.target.classList.contains("my-class") {
        // 
    }
});

我怎样才能检测到对其中任何元素的点击？

我发现了以下问题，但它仅适用于由 id 选择且无委托的单个元素：Detect click inside/outside of element with single event handler

javascript