Question

我正在使用Gridster小部件用于网页。有一个JSON，它提供有关每个网格上应该有什么图像的数据（捕获来自JSON的文本，然后加载来自数据库的相应图像）。目前我是我可以在网格上显示多个图像。多个图像将在json中以逗号分隔。

当前JSON的格式为：

var json = [{
    "html": 'abc.png',
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html": "xyz.png",
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "def.png",
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "abc.png",
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "def.png",
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},
{
    "html": "abc.png    ",
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];

每个网格只有一个图像

新的JSON将采用以下形式：

var json = [{
    "html": "abc.png,xyz.png,def.png',  //3 Images
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html": "xyz.png", //1 Image
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "def.png,abc.png", //2 Images
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},
{
    "html": "abc.png", //1 Image
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "def.png,abc.png", //2 Images
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},

{
    "html": "abc.png", // 1 Image
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];

旧形式就像

 "html":"image1"

新表单就像

"html":"image1,image2,....imageN"

创建小部件的JS如下：

for(var index=0;index<json.length;index++) {
  {% load static %}
  gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% get_static_prefix %}images/'+json[index].html+'"></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
 };

我没有得到上述循环如何处理多个图像

Fiddle Link

更新1

Updated Fiddle Link

Answer 1

我对gridster并不熟悉，但也许这对你有用 -

拆分图像文件名字符串，然后让另一个嵌套循环构建输出字符串 -

it('executes a query', (done) => {
  const query = gql` query people { allPeople(first: 1) { people { name } } }`;
  const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };

  const withGraphQL = graphql(query);

  class Container extends React.Component {
    componentWillReceiveProps(props) {
      expect(props.data.loading).toBeFalsy();
      expect(props.data.error).toBeUndefined();
      expect(props.data.allPeople.people[0].name).toEqual(data.allPeople.people[0].name);
      done();
    }
    render() {
      return null;
    }
  };

  const ContainerWithData = withGraphQL(Container);

  mount(<MockedProvider removeTypename mocks={[ { request: { query },   result: { data } } ]}><ContainerWithData /></MockedProvider>);

});

https://jsfiddle.net/joqfgr2t/3/

使用Javascript或jquery动态显示多个图像

1 个答案: