Hi
They do not sort automatically in php file. I searched for the individual details of the tag element and found where the problem was.
The Combo element has a problem:
<Select><option value='car'>Car</option></Select>
please fixed format autocomplete .
<?php
$title = 'www';
$url = url('Admin/Kanban/Create');
if (!isEmptyValue($model->id)){
$title = 'zzz';
$url = url("Admin/Kanban/Edit/$model->id");
}
?>
@extends('backend.layouts.master')
@section('title', $title)
@section('content')
@section('partContentStart')
<form action="{{$url}}" method="post" data-oncallfunctionbeforesubmit="saveJson">
@csrf
<input type="hidden" name="id" value="{{$model->id}}" />
<input type="hidden" name="jsonData" value="{{$model->jsonData}}" id="hdnJsonData" />
<div class="content-header clearfix">
<h1 class="pull-right">
{{$title}}
</h1>
<div class="pull-left">
<button type="submit" class="btn btn-primary">ذخیره</button>
<a href="{{url('Admin/Report/List')}}" class="btn btn-default">انصراف</a>
</div>
</div>
@endsection
@section('partContentEnd')
</form>
@endsection
<script src="{{asset('themes/backend/AdminLTE_rtl/plugins/iCheck/icheck.min.js')}}" type="text/javascript"></script>
<link href="{{asset('themes/backend/AdminLTE_rtl/plugins/iCheck/flat/_all.css')}}" type="text/css" rel="stylesheet" />
<style>
.horizontal-scrollable > .row {
overflow-x: auto;
white-space: nowrap;
margin:0;
}
.horizontal-scrollable > .row > .dsKanbanEdit {
display: inline-block;
float: none;
width: 350px;
margin-left:15px;
}
.listIcons {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.listIcons li {
padding: 10px;
display: inline-block;
font-size: 12px;
border-radius: 3px;
}
.listIcons i {
padding: 0px 2px 0px 4px;
display: inline-block;
font-size: 18px;
vertical-align: sub;
}
.fieldTable td {
cursor: pointer;
}
.fieldTable i {
color: #e49e00;
font-size: 20px;
visibility: hidden;
}
.fieldTable td:hover i {
visibility: inherit;
}
.ctrlDragDs {
padding: 3px;
cursor:pointer;
float:right;
margin: 0px 2px 7px 0px;
border: dashed 1px #3c8dbc;
}
.ctrlDragDs.active {
border: dashed 1px #ff0398;
}
</style>
<script type="text/javascript">
var element = {},
fieldData = [],
activeSelectFrmKanban,
dataJson = {!!$model->jsonData!!},
managerKanban = {!!$model->managerKanban!!};
console.log(managerKanban);
$(document).ready(function () {
element =
{
drpKey: $('#drpKey'),
drpMenus: $('#drpMenus'),
jsonData: $('#hdnJsonData'),
catergoryKanban: $('#catergoryKanban'),
txtSaveFileName: $('#txtSaveFileName'),
formDesignKanban: $('#formDesignKanban'),
paramSaveFileName: $('#paramSaveFileName'),
drpDataSourceField: $('#drpDataSourceField'),
formDesignKanbanItems: $('#formDesignKanban .row'),
btnAddControlLable: $('#btnAddControlLable'),
btnEditControlLable: $('#btnEditControlLable'),
btnAddControlFieldData: $('#btnAddControlFieldData'),
btnEditControlFieldData: $('#btnEditControlFieldData'),
};
element.drpKey.change(function () {
updateCatergory();
});
element.drpMenus.on("change", function (e) {
});
element.btnAddControlFieldData.click(function () {
var t = $(this), dsf = element.drpDataSourceField.val(), title = element.drpDataSourceField.getComboText();
addControl(dsf, title, 2);
});
element.catergoryKanban.on('click', 'button', function () {
var t = $(this);
addFormKanban(t.data('key'), t.data('title'));
});
element.formDesignKanban.on('click', '.dsKanbanEdit', function () {
var t = $(this);
activeFormKanban(t);
});
element.formDesignKanban.on('click', '.ctrlDragDs', function () {
var t = $(this);
activeControl(t);
});
$('input[type="checkbox"].flat-blue, input[type="radio"].flat-blue').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
$('.colorPickerKN').colorpicker();
$('.select2').select2();
for (var i = 0; i < managerKanban.length; i++) {
var item = managerKanban[i],
ops = $("<option value='" + item.key + "'>" + item.title + "</option>");
ops.data('kanban', item);
element.drpKey.append(ops);
}
updateCatergory();
//setConfigDesignByJsonData(dataJson);
});
function saveJson() {
var dataJson = [], forms = element.formDesignKanban.find('.dsKanbanEdit');
forms.each(function () {
var t = $(this), ctrlDragDs = t.find('ctrlDragDs'), data = {};
data.categoryId = t.data('key');
data.menuId = t.data('key');
data.ctrls = [];
ctrlDragDs.each(function () {
var ctrl = $(this), dtf = {};
dtf.fieldData = ctrl.data('field-data');
dtf.ctrlType = ctrl.data('type');
data.push(dtf);
});
dataJson.push(data);
});
console.log(dataJson);
element.jsonData.val(toJson(dataJson));
}
function deleteField(key) {
$("td[data-field='" + key + "']").remove();
delete fieldData[key];
}
function updateCatergory() {
var kanban = element.drpKey.getComboData('kanban'), html = '';
element.catergoryKanban.html('');
for (var i = 0; i < kanban.categorys.length; i++) {
var itemCategory = kanban.categorys[i];
html += "<div data-category='" + itemCategory.key + "'><label>" + itemCategory.title + "</label><p>";
for (key in itemCategory.data) {
var title = itemCategory.data[key];
html += "<button type='button' style='margin: 5px;' class='btn btn-default' data-key='" + key + "' data-title='" + title + "'><i class='fa fa-plus'></i> " + title + "</button>";
}
html += '</p></div>';
}
element.catergoryKanban.html(html);
html = '';
for (var i = 0; i < kanban.fields.length; i++) {
var item = kanban.fields[i], ctrlType = item.ctrlType, sType = '';
switch (ctrlType) {
case 2:
sType = ' (تگ فایل ها)';
break;
case 3:
sType = ' (تگ برچسب ها)';
break;
}
html += "<option value='" + item.dataField + "'>" + item.title + sType + "</option>";
}
element.drpDataSourceField.html(html);
html = '';
for (var i = 0; i < kanban.menus.length; i++) {
var item = kanban.menus[i];
html += "<option value='" + i + "' selected> " + item.title + "</option>";
}
element.drpMenus.append(html);
element.drpMenus.select2();
}
function addFormKanban(key, title) {
var html = $("<div class='dsKanbanEdit' data-key='" + key + "'>"
+ "<div class='box'><div class='box-header with-border'>"
+ "<h3 class='box-title'>" + title + "</h3>"
+ "<div class='box-tools pull-right'>"
+ "<button type='button' class='btn btn-box-tool' data-widget='remove'><i class='fal fa-trash-alt'></i></button>"
+ "</div></div>"
+ "<div class='box-body'></div>"
+ "</div></div>");
activeFormKanban(html);
element.formDesignKanbanItems.append(html);
addControl('', '[انتخاب فیلد]', 1);
}
function activeFormKanban(elm) {
if (activeSelectFrmKanban) {
activeSelectFrmKanban.removeClass('activeKN');
activeSelectFrmKanban.find('.box-primary').removeClass('box-primary').addClass('box-default');
}
elm.addClass('activeKN');
elm.find('.box').addClass('box-primary').removeClass('box-default')
activeSelectFrmKanban = elm;
element.btnAddControlFieldData.enabled(true);
element.btnEditControlFieldData.enabled(false);
}
function addControl(fieldData , title, type) {
var html = '', body = activeSelectFrmKanban.find('.box-body');
switch (type) {
case 1:
html = "<div class='ctrlDragDs' data-type=1 data-field-data ='" + fieldData + "' style='float:none'>" + title + "</div>";
break;
case 2:
html = "<span class='ctrlDragDs' data-type=1 data-field-data ='" + fieldData + "'>" + title + "</span>";
break;
}
html = $(html);
body.append(html);
activeControl(html);
}
function activeControl(elm) {
var body = activeSelectFrmKanban.find('.box-body');
body.find('.active').removeClass('active');
elm.addClass('active');
}
function setConfigDesignByJsonData(dJson) {
if (!isNull(dJson) && dJson.fields) {
for (var i = 0; i < dJson.fields.length; i++) {
var item = dJson.fields[i];
addField(item.field, item.title);
}
}
}
</script>
<div class="row">
<div class="col-md-4">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">مشخصات کانبان</h3>
</div>
<div class="box-body">
<div class="form-group">
<label>عنوان کانبان</label>
<input type="text" class="form-control" maxlength="50" placeholder="مثال : سفارشات نامه" name="title" value="{{$model->title}}" />
</div>
<div class="form-group">
<label>انتخاب کانبان ماژول</label>
<select class="form-control" id="drpKey" name="key" data-select-value="{{$model->key}}"></select>
</div>
<div class="form-group">
<label>شرح</label>
<textarea class="form-control" name="description" style="height:60px"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="active" /> فعال
</label>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">انتخاب دسته بندی کانبان</h3>
</div>
<div class="box-body">
<div id="catergoryKanban" style="height: 274px;overflow: auto;"></div>
</div>
</div>
</div>
</div>
<h2 class="page-header">
<i class="fad fa-edit" style="color:#3c8dbc"></i> ابزارهای کانبان
</h2>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#tabInsertCtrls">کنترلها</a>
</li>
<li>
<a data-toggle="tab" href="#tabStyle">تنظیمات سبک</a>
</li>
<li>
<a data-toggle="tab" href="#tabIcons">آیکن</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabInsertCtrls">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>درج کردن فیلد داده</label>
<div class="input-group">
<select class="form-control" id="drpDataSourceField"></select>
<div class="input-group-btn">
<button type="button" class="btn btn-info no-radius" disabled id="btnEditControlFieldData">ویرایش</button>
<button type="button" class="btn btn-success" disabled id="btnAddControlFieldData">اضافه</button>
</div>
</div>
</div>
<div class="form-group">
<label>درج کردن برچسب عنوان ثابت</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-info no-radius" disabled id="btnEditControlLable">ویرایش</button>
<button type="button" class="btn btn-success" disabled id="btnAddControlLable">اضافه</button>
</div>
</div>
</div>
<div class="form-group">
<label>انتخاب منوها</label>
<select class="select2" id="drpMenus" style="width:100%" multiple></select>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="tab-pane" id="tabStyle">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>فونت</label>
<select class="select2" style="width:100%" multiple>
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Book Antiqua">Book Antiqua</option>
<option value="Charcoal">Charcoal</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier">Courier</option>
<option value="Courier New">Courier New</option>
<option value="cursive">cursive</option>
<option value="Gadget">Gadget</option>
<option value="Geneva">Geneva</option>
<option value="Georgia">Georgia</option>
<option value="Helvetica">Helvetica</option>
<option value="Impact">Impact</option>
<option value="Lucida Console">Lucida Console</option>
<option value="Lucida Grande">Lucida Grande</option>
<option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
<option value="Monaco">Monaco</option>
<option value="monospace">monospace</option>
<option value="Palatino">Palatino</option>
<option value="Palatino Linotype">Palatino Linotype</option>
<option value="sans-serif">sans-serif</option>
<option value="serif">serif</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Verdana">Verdana</option>
</select>
</div>
<div class="form-group">
<label >اندازه فونت</label>
<select style="width:100%" class="form-control">
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="large">Large</option>
<option value="larger">Larger</option>
<option value="medium">Medium</option>
<option value="small">Small</option>
<option value="smaller">Smaller</option>
<option value="x-large">X-Large</option>
<option value="x-small">X-Small</option>
<option value="xx-large">XX-Large</option>
<option value="xx-small">XX-Small</option>
<option value="xxx-large">XXX-Large</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>رنگ فونت</label>
<div class="input-group colorPickerKN">
<input type="text" class="form-control" />
<div class="input-group-addon">
<i></i>
</div>
</div>
</div>
<div class="form-group">
<label>رنگ زمینه</label>
<div class="input-group colorPickerKN">
<input type="text" class="form-control" />
<div class="input-group-addon">
<i></i>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>نوع فونت</label>
<div class='pad5'><input type='checkbox' class='flat-blue' value=''> <i class="fa fa-bold"></i> Bold</div>
<div class='pad5'><input type='checkbox' class='flat-blue' value=''> <i class="fa fa-italic"></i> Italic</div>
<div class='pad5'><input type='checkbox' class='flat-blue' value=''> <i class="fa fa-underline"></i> Underline</div>
<div class='pad5'><input type='checkbox' class='flat-blue' value=''> <i class="fa fa-strikethrough"></i> Strikethrough</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>هم تراز</label>
<div class='pad5'><input type='radio' class='flat-blue' value=''> <i class="fa fa-align-left"></i> چپ</div>
<div class='pad5'><input type='radio' class='flat-blue' value=''> <i class="fa fa-align-center"></i> وسط</div>
<div class='pad5'><input type='radio' class='flat-blue' value=''> <i class="fa fa-align-right"></i> راست</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tabIcons">
<ul class="listIcons">
<li title="تنظیمات">
<i class="fa fa-cog"></i>
</li>
<li title="ویرایش">
<i class="fa fa-edit"></i>
</li>
<li title="کاربر">
<i class="fa fa-user"></i>
</li>
<li title="برچسب">
<i class="fa fa-tags"></i>
</li>
<li title="چارت">
<i class="fal fa-chart-line"></i>
</li>
<li><i class="fa fa-fw fa-adjust"></i></li>
<li><i class="fa fa-fw fa-anchor"></i></li>
<li><i class="fa fa-fw fa-archive"></i></li>
<li><i class="fa fa-fw fa-arrows"></i></li>
<li><i class="fa fa-fw fa-arrows-h"></i></li>
<li><i class="fa fa-fw fa-arrows-v"></i></li>
<li><i class="fa fa-fw fa-asterisk"></i></li>
<li><i class="fa fa-fw fa-at"></i></li>
<li><i class="fa fa-fw fa-balance-scale"></i></li>
<li><i class="fa fa-fw fa-ban"></i></li>
<li><i class="fa fa-fw fa-barcode"></i></li>
<li><i class="fa fa-fw fa-bars"></i></li>
<li><i class="fa fa-fw fa-battery-empty"></i></li>
<li><i class="fa fa-fw fa-battery-full"></i></li>
<li><i class="fa fa-fw fa-battery-half"></i></li>
<li><i class="fa fa-fw fa-battery-quarter"></i></li>
<li><i class="fa fa-fw fa-battery-three-quarters"></i></li>
<li><i class="fa fa-fw fa-cloud"></i></li>
<li><i class="fa fa-fw fa-cloud-download"></i></li>
<li><i class="fa fa-fw fa-cloud-upload"></i></li>
<li><i class="fa fa-fw fa-code"></i></li>
<li><i class="fa fa-fw fa-coffee"></i></li>
<li><i class="fa fa-fw fa-cog"></i></li>
<li><i class="fa fa-fw fa-cogs"></i></li>
<li><i class="fa fa-fw fa-comment"></i></li>
<li><i class="fa fa-fw fa-comments"></i></li>
<li><i class="fa fa-fw fa-compass"></i></li>
<li><i class="fa fa-fw fa-copyright"></i>t</li>
<li><i class="fa fa-fw fa-credit-card"></i></li>
<li><i class="fa fa-fw fa-crop"></i></li>
<li><i class="fa fa-fw fa-crosshairs"></i></li>
<li><i class="fa fa-fw fa-cube"></i></li>
<li><i class="fa fa-fw fa-cubes"></i></li>
<li><i class="fa fa-fw fa-database"></i></li>
<li><i class="fa fa-fw fa-desktop"></i></li>
<li><i class="fa fa-fw fa-diamond"></i></li>
<li><i class="fa fa-fw fa-download"></i></li>
<li><i class="fa fa-fw fa-edit"></i></li>
<li><i class="fa fa-fw fa-ellipsis-h"></i></li>
<li><i class="fa fa-fw fa-ellipsis-v"></i></li>
<li><i class="fa fa-fw fa-envelope"></i></li>
</ul>
</div>
</div>
</div>
<div id="formDesignKanban" class="horizontal-scrollable" style="margin-bottom:50px;overflow:auto">
<div class="row">
</div>
</div>
@endsection