simonqian/dynamic-specifications-with-jquery.html

## dynamic-specifications-with-jquery.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>规格选择</title>
  <style>
    *,
    html,
    body,
    div,
    span,
    input,
    u {
      padding: 0;
      margin: 0;
      list-style: none;
      outline: none;
      text-decoration: none
    }

    .box {
      width: 700px;
      margin: 10px auto 20px;
    }

    .box>li {
      padding: 5px 0;
    }

    .item>* {
      display: inline-block;
      margin-right: 10px;
    }

    .list>li {
      display: inline-block;
      margin-right: 10px;
    }

    .table {
      border: 1px solid #ddd;
      border-collapse: collapse;
      border-spacing: 0;
      width: 700px;
      margin: 10px auto;
    }

    .table>thead>tr>td,
    .table>tbody>tr>td {
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      padding: 5px 8px;
    }
  </style>
</head>

<body>
  <div id="checkboxs"></div>
  <div id="table"></div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
  <script type="text/javascript">
    var data = [
      {
        "classId": "1",
        "className": "气瓶规格",
        "classList": [
          {
            "typeId": "1",
            "typeName": "5kg"
          },
          {
            "typeId": "2",
            "typeName": "15kg"
          },
          {
            "typeId": "3",
            "typeName": "20kg"
          },
          {
            "typeId": "4",
            "typeName": "30kg"
          }
        ]
      },
      {
        "classId": "2",
        "className": "气瓶类型",
        "classList": [
          {
            "typeId": "1",
            "typeName": "公司瓶"
          },
          {
            "typeId": "2",
            "typeName": "客户瓶"
          }
        ]
      },
      {
        "classId": "3",
        "className": "加气类型",
        "classList": [
          {
            "typeId": "1",
            "typeName": "普通气"
          },
          {
            "typeId": "2",
            "typeName": "佳能气"
          },
          {
            "typeId": "3",
            "typeName": "丙烷"
          }
        ]
      }
    ]

    function renderChecks(data) {
      var $ul = $('<ul>', { class: 'box' })

      var $lis = _.map(data, function (element) {
        return $('<li>', { id: element.classId, class: 'item' }).append(
          [
            $('<span>').text(element.className),
            $('<ul>', { class: 'list' }).append(
              _.map(element.classList, function (child) {
                return $('<li>').append($('<input>', { id: 'cb-' + element.classId + '-' + child.typeId, type: 'checkbox', value: child.typeId, checked: false })).append(child.typeName)
              })
            )
          ]
        )
      })

      $ul.append($lis)
      return $ul
    }

    function calData(data) {
      var thead = _.reduce(
        _.filter(data, function (element) {
          return _.some(element.classList, function (item) {
            var $cb = $('#cb-' + element.classId + '-' + item.typeId)
            return $cb.prop('checked')
          })
        }),
        function (result, item) {
          result.push(item.className)
          return result
        },
        []
      )
      console.log('thead', thead)

      var classData = _.filter(
        _.map(data, function (element) {
          return _.map(_.filter(element.classList, function (item) {
            var $cb = $('#cb-' + element.classId + '-' + item.typeId)
            return $cb.prop('checked')
          }), function (item) {
            return {
              typeId: item.typeId,
              typeName: item.typeName
            }
          })
        }),
        function (element) {
          return element.length > 0
        }
      )
      console.log('classData', classData)

      function cartesian() {
        return _.reduce(arguments, function (a, b) {
          return _.flatten(_.map(a, function (x) {
            return _.map(b, function (y) {
              return x.concat([y])
            })
          }), true)
        }, [[]])
      }
      var tbody = cartesian(...classData)
      console.log('cartesian', tbody)

      return {
        thead: thead,
        tbody: tbody
      }
    }

    function renderTables(tableData) {
      var thead = tableData.thead
      var tbody = tableData.tbody

      var $table = $('<table>', { class: 'table' })
      var $thead = $('<thead>').append($('<tr>').append(
        _.map(thead, function (item) {
          return $('<td>').append(item)
        })
      ))

      var $tbody = $('<tbody>').append(
        _.map(tbody, function (row) {
          var key = _.map(row, function (col) {
            return col.typeId
          }).join('-')
          return $('<tr>', { id: key }).append(
            _.map(row, function (col) {
              return $("<td>").append(col.typeName)
            })
          )
        })
      )

      $table.append($thead).append($tbody)
      return $table
    }

    $(function () {
      $('#checkboxs').html(renderChecks(data))
      var tableData = calData(data)
      $('#table').html(renderTables(tableData))

      $('#checkboxs').on('click', "input[id^='cb']", function (event) {
        var tableData = calData(data)
        $('#table').html(renderTables(tableData))
      })
    })
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>规格选择</title>
	<style>
	*,
	html,
	body,
	div,
	span,
	input,
	u {
	padding: 0;
	margin: 0;
	list-style: none;
	outline: none;
	text-decoration: none
	}

	.box {
	width: 700px;
	margin: 10px auto 20px;
	}

	.box>li {
	padding: 5px 0;
	}

	.item>* {
	display: inline-block;
	margin-right: 10px;
	}

	.list>li {
	display: inline-block;
	margin-right: 10px;
	}

	.table {
	border: 1px solid #ddd;
	border-collapse: collapse;
	border-spacing: 0;
	width: 700px;
	margin: 10px auto;
	}

	.table>thead>tr>td,
	.table>tbody>tr>td {
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 5px 8px;
	}
	</style>
	</head>

	<body>
	<div id="checkboxs"></div>
	<div id="table"></div>

	<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
	<script type="text/javascript">
	var data = [
	{
	"classId": "1",
	"className": "气瓶规格",
	"classList": [
	{
	"typeId": "1",
	"typeName": "5kg"
	},
	{
	"typeId": "2",
	"typeName": "15kg"
	},
	{
	"typeId": "3",
	"typeName": "20kg"
	},
	{
	"typeId": "4",
	"typeName": "30kg"
	}
	]
	},
	{
	"classId": "2",
	"className": "气瓶类型",
	"classList": [
	{
	"typeId": "1",
	"typeName": "公司瓶"
	},
	{
	"typeId": "2",
	"typeName": "客户瓶"
	}
	]
	},
	{
	"classId": "3",
	"className": "加气类型",
	"classList": [
	{
	"typeId": "1",
	"typeName": "普通气"
	},
	{
	"typeId": "2",
	"typeName": "佳能气"
	},
	{
	"typeId": "3",
	"typeName": "丙烷"
	}
	]
	}
	]

	function renderChecks(data) {
	var $ul = $('<ul>', { class: 'box' })

	var $lis = _.map(data, function (element) {
	return $('<li>', { id: element.classId, class: 'item' }).append(
	[
	$('<span>').text(element.className),
	$('<ul>', { class: 'list' }).append(
	_.map(element.classList, function (child) {
	return $('<li>').append($('<input>', { id: 'cb-' + element.classId + '-' + child.typeId, type: 'checkbox', value: child.typeId, checked: false })).append(child.typeName)
	})
	)
	]
	)
	})

	$ul.append($lis)
	return $ul
	}

	function calData(data) {
	var thead = _.reduce(
	_.filter(data, function (element) {
	return _.some(element.classList, function (item) {
	var $cb = $('#cb-' + element.classId + '-' + item.typeId)
	return $cb.prop('checked')
	})
	}),
	function (result, item) {
	result.push(item.className)
	return result
	},
	[]
	)
	console.log('thead', thead)

	var classData = _.filter(
	_.map(data, function (element) {
	return _.map(_.filter(element.classList, function (item) {
	var $cb = $('#cb-' + element.classId + '-' + item.typeId)
	return $cb.prop('checked')
	}), function (item) {
	return {
	typeId: item.typeId,
	typeName: item.typeName
	}
	})
	}),
	function (element) {
	return element.length > 0
	}
	)
	console.log('classData', classData)

	function cartesian() {
	return _.reduce(arguments, function (a, b) {
	return _.flatten(_.map(a, function (x) {
	return _.map(b, function (y) {
	return x.concat([y])
	})
	}), true)
	}, [[]])
	}
	var tbody = cartesian(...classData)
	console.log('cartesian', tbody)

	return {
	thead: thead,
	tbody: tbody
	}
	}

	function renderTables(tableData) {
	var thead = tableData.thead
	var tbody = tableData.tbody

	var $table = $('<table>', { class: 'table' })
	var $thead = $('<thead>').append($('<tr>').append(
	_.map(thead, function (item) {
	return $('<td>').append(item)
	})
	))

	var $tbody = $('<tbody>').append(
	_.map(tbody, function (row) {
	var key = _.map(row, function (col) {
	return col.typeId
	}).join('-')
	return $('<tr>', { id: key }).append(
	_.map(row, function (col) {
	return $("<td>").append(col.typeName)
	})
	)
	})
	)

	$table.append($thead).append($tbody)
	return $table
	}

	$(function () {
	$('#checkboxs').html(renderChecks(data))
	var tableData = calData(data)
	$('#table').html(renderTables(tableData))

	$('#checkboxs').on('click', "input[id^='cb']", function (event) {
	var tableData = calData(data)
	$('#table').html(renderTables(tableData))
	})
	})
	</script>
	</body>

	</html>