update add_assets-group

apps/assets/templates/assets/asset_group_create.html

@@ -3,8 +3,10 @@
 {% load static %}
 {% load bootstrap %}
 {% block custom_head_css_js %}
-    <link href="{% static "css/plugins/select2/select2.min.css" %}" rel="stylesheet">
-    <script src="{% static "js/plugins/select2/select2.full.min.js" %}"></script>
+    <link href="{% static 'css/plugins/select2/select2.min.css' %}" rel="stylesheet">
+    <script src="{% static 'js/plugins/select2/select2.full.min.js' %}"></script>
+    <link href="{% static 'css/plugins/dataTables/datatables.min.css' %}" rel="stylesheet">
+    <script src="{% static 'js/plugins/dataTables/datatables.min.js' %}"></script>
 {% endblock %}
 {% block content %}
 <div class="wrapper wrapper-content animated fadeInRight">
@@ -39,12 +41,9 @@
                                         <div class="hr-line-dashed"></div>
                                         <h3 class="widget-head-color-box">资产数量</h3>
                                             <div class="form-group">
-                                                <label for="assets" class="col-sm-2 control-label">已有</label>
-                                                    <div class="col-sm-9" id="div1">
-                                                        <button type="button" class="btn btn-info btn-rounded" id="add_asset">
-                                                          0
-                                                        </button>
-                                                       <!--<input type="text" value="" name="id_list" id="id_list"/>-->
+                                                <label class="col-sm-2 control-label">已选</label>
+                                                    <div class="col-sm-9" id="asset_sed">
+                                                        <input type="text" class=" form-control" id="add_asset" value="{{ assets_count }}">
                                                     </div>
                                             </div>
                                         <div class="hr-line-dashed"></div>
@@ -81,22 +80,20 @@
 
 {% block custom_foot_js %}
 <script type="text/javascript">
-    $(function(){
-        $("#id_list").val("");
-    });
     $(document).ready(function () {
         $('.select2').select2();
         $('.select2-system-user').select2();
     })
 
     $('#add_asset').on('click',function(){
-        //$('#box2').load("{% url 'assets:asset-modal-list' %}");
         $('#modal').modal('show');
     });
 
     $('#modal').modal({
-        show:false,
-        remote:"{% url 'assets:asset-modal-list' %}",
+        show: false,
+        backdrop: 'static',
+        keyboard: 'false',
+        remote:"{% url 'assets:asset-modal-list' %}?group_id={{ group_id }}",
     });
 
     $('#modal').on('show.bs.modal',function(){
@@ -119,12 +116,5 @@
         //alert('当远程数据加载完毕后，再触发；')
     });
 
-    $('#save-btn').on('click',function(){
-        alert('点击保存按钮时触发；')
-        $('#modal').modal('hide');
-    });
-
 </script>
-
-
 {% endblock %}
\ No newline at end of file

apps/assets/templates/assets/asset_modal_list.html

+
 <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-        <h4 class="modal-title" id="myModalLabel">分配/回收资产</h4>
+    <h4 class="modal-title" id="myModalLabel">分配/回收资产</h4>
 </div>
-<div class="modal-body">
-    <table class="table table-hover">
+
+<div class="modal-body" style="padding-bottom: 0px;">
+    <table aria-describedby="editable_info" role="grid" class="table table-striped table-bordered table-hover  dataTable" id="editable">
         <thead>
             <tr>
-                <th class="text-center">
+                <th class="text-center" style="background-color:white">
                     <input type="checkbox" id="check_all" onclick="checkAll('check_all', 'checked')">
                 </th>
                 <th>资产名称</th>
@@ -17,28 +19,27 @@
             </tr>
         </thead>
         <tbody>
-            {% for asset in asset_modal_list %}
+        {% for asset in asset_modal_list %}
             <tr>
-                <td class="text-center">
-                    <input type="checkbox" name="checked" value="{{ asset.id }}">
-                </td>
+            {% if asset.id in group_assets %}
+                <td class="text-center" ><input type="checkbox" name="checked" value="{{ asset.id }}" checked="checked"></td>
+            {% else %}
+                <td class="text-center" ><input type="checkbox" name="checked" value="{{ asset.id }}"></td>
+            {% endif %}
                 <td>{{ asset.hostname }}</td>
                 <td>{{ asset.ip }}</td>
                 <td>虚拟机</td>
                 <td>网络设备</td>
                 <td>微信事业部</td>
             </tr>
-            {% endfor %}
+        {% endfor %}
         </tbody>
     </table>
 </div>
+
 <div class="modal-footer">
-    <button type="button" class="btn btn-default" id="close-btn">
-        关闭
-    </button>
-    <button type="button" class="btn btn-primary" id="save-btn">
-        保存
-    </button>
+    <button type="button" class="btn btn-default" id="close-btn">取消</button>
+    <button type="button" class="btn btn-primary" id="save-btn">保存</button>
 </div>
 
 <script type="text/javascript">
@@ -52,15 +53,65 @@
        // alert('点击保存按钮时触发2；')
         var box = $("input[name='checked']:checked");
         var size=box.length;
-        $("#add_asset").text(size);
+        document.getElementById('add_asset').value = size;
         var ids=[];
-        $("#div1").find("input").remove();
+        $("#asset_sed").find("input[name='assets']").remove();
         for(var i=0;i<box.length;i++){
             var value = $(box[i]).val();
-            $("#div1").append("<input type='hidden' name='assets' value='"+value+"'>");
+            $("#asset_sed").append("<input  type='hidden' name='assets' value='"+value+"'>");
         }
         $('#modal').modal('hide');
+    });
+
+    $(document).ready(function(){
+        $('#editable').DataTable({
+            "aaSorting": [[1, "asc"]],  //给列表排序 ，第一个参数表示数组 (由0开始)。第二个参数为 desc或是asc
+            "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }], // 0列不参加排序
+            "aLengthMenu": [[10, 25, 50, -1], ["10", "25", "50", "all"]],  //设置每页显示记录的下拉菜单
+            "oLanguage": {
+                "sLengthMenu": "每页显示 _MENU_ 条记录",
+                "sZeroRecords": "对不起，查询不到任何相关数据",
+                "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
+                "sInfoEmtpy": "找不到相关数据",
+                "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
+                "sProcessing": "正在加载中...",
+                "sSearch": "搜索",
+                "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
+                "oPaginate": {
+                    "sFirst":    "第一页",
+                    "sPrevious": " 上一页 ",
+                    "sNext":     " 下一页 ",
+                    "sLast":     " 最后一页 "
+                }
+            } //多语言配置
+        });
+
+        /* Init DataTables */
+        var oTable = $('#editable').DataTable();
+            /* Apply the jEditable handlers to the table */
+            oTable.$('td').editable( '../example_ajax.php', {
+                "callback": function( sValue, y ) {
+                    var aPos = oTable.fnGetPosition( this );
+                    oTable.fnUpdate( sValue, aPos[0], aPos[1] );
+                },
+                "submitdata": function ( value, settings ) {
+                    return {
+                        "row_id": this.parentNode.getAttribute('id'),
+                        "column": oTable.fnGetPosition( this )[2]
+                    };
+                },
 
+                "width": "90%",
+                "height": "100%",
+            });
     });
 
+    function fnClickAddRow() {
+            $('#editable').dataTable().fnAddData( [
+                "Custom row",
+                "New row",
+                "New row",
+                "New row",
+                "New row" ] );
+    }
 </script>

apps/assets/views.py

@@ -106,6 +106,17 @@ class AssetModalListView(AdminUserRequiredMixin, ListView):
     context_object_name = 'asset_modal_list'
     template_name = 'assets/asset_modal_list.html'
 
+
+    def get_context_data(self, **kwargs):
+        group_id = self.request.GET.get('group_id')
+        if group_id:
+            group = AssetGroup.objects.get(id=group_id)
+            context = {
+                'group_assets':[x.id for x in group.assets.all()]
+            }
+            kwargs.update(context)
+        return super(AssetModalListView, self).get_context_data(**kwargs)
+
 class AssetGroupCreateView(AdminUserRequiredMixin, CreateView):
     model = AssetGroup
     form_class = AssetGroupForm
@@ -118,22 +129,11 @@ class AssetGroupCreateView(AdminUserRequiredMixin, CreateView):
         context = {
             'app': _('Assets'),
             'action': _('Create asset group'),
-            'assets': Asset.objects.all(),
-            # 'systemusers':SystemUser.objects.all(),
+            'assets_count': 0,
         }
         kwargs.update(context)
         return super(AssetGroupCreateView, self).get_context_data(**kwargs)
 
-    # def form_valid(self, form):
-    #     asset_group = form.save()
-    #     assets_id_list = self.request.POST.getlist('assets', [])
-    #     assets = [get_object_or_404(Asset, id=asset_id) for asset_id in assets_id_list]
-    #     asset_group.created_by = self.request.user.username or 'Admin'
-    #     asset_group.assets.add(*tuple(assets))
-    #     asset_group.save()
-    #     return super(AssetGroupCreateView, self).form_valid(form)
-
-
 
     def form_valid(self, form):
         asset_group = form.save()
@@ -164,11 +164,9 @@ class AssetGroupListView(AdminUserRequiredMixin, ListView):
         self.queryset = super(AssetGroupListView, self).get_queryset()
         self.keyword = keyword = self.request.GET.get('keyword', '')
         self.sort = sort = self.request.GET.get('sort', '-date_created')
-
         if keyword:
             self.queryset = self.queryset.filter(Q(name__icontains=keyword) |
                                                  Q(comment__icontains=keyword))
-
         if sort:
             self.queryset = self.queryset.order_by(sort)
         return self.queryset
@@ -194,19 +192,23 @@ class AssetGroupDetailView(SingleObjectMixin, AdminUserRequiredMixin, ListView):
         kwargs.update(context)
         return super(AssetGroupDetailView, self).get_context_data(**kwargs)
 
-
-
 class AssetGroupUpdateView(AdminUserRequiredMixin, UpdateView):
     model = AssetGroup
     form_class = AssetGroupForm
     template_name = 'assets/asset_group_create.html'
     success_url = reverse_lazy('assets:asset-group-list')
 
+    def get(self, request, *args, **kwargs):
+        self.object = self.get_object(queryset=AssetGroup.objects.all())
+        return super(AssetGroupUpdateView, self).get(request, *args, **kwargs)
+
     def get_context_data(self, **kwargs):
         context = {
             'app': _('Assets'),
             'action': _('Create asset group'),
-            'assets': Asset.objects.all(),
+            # 'assets': Asset.objects.all(),
+            'assets_count': self.object.assets.all().count(),
+            'group_id':self.object.id,
         }
         kwargs.update(context)
         return super(AssetGroupUpdateView, self).get_context_data(**kwargs)