Knockout مع Bootstrap لإنشاء واجهة مستخدم ديناميكية لتحقيق إدارة قائمة المنتجات

Ben zhang wen zhang jie he Bootstrap chuang jian yi ge bei dai wan quan de ying yong, dui chan pin lie biao jing xing guan li, bao kuai chan pin de zeng jia, shan chu, xiu gai.　

Xu yao deYin yong　

<script type='text/javascript' src='http://www.see-source.com/js/knockout-2.2.0.js'></script>
<script type='text/javascript' src='http://www.see-source.com/js/jquery-1.6.2.min.js'></script>
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">

Html dian ma　

<body>
<!-- Dong tai sheng Cheng chan pin lie biao -->
<table class="table table-bordered">
 <thead>
  <tr>
   <th>ID</th>
   <th>اسم المنتج</th>
   <th>السعر الأصلي</th>
   <th>سعر الترويج</th>
   <th>الإجراء</th>
  </tr>
 </thead>
 <tbody data-bind="foreach: products">
  <tr > 
   <td> 
   <span data-bind="text: $data.Id"></span> 
   </td> 
   <td> 
   <input type="text" data-bind="value: $data.Name"/> 
   </td> 
   <td>
   <input type="text" data-bind="value: $data.Price"/> 
   </td> 
   <td> 
   <input type="text" data-bind="value: $data.ActualCost"/> 
   </td> 
   <td> 
   <input type="button" class="btn" value="تعديل" data-bind="click: $root.update"/> 
   <input type="button" class="btn" value="حذف" data-bind="click: $root.remove"/> 
   </td> 
  </tr> 
 </tbody>
</table>
<!-- form إضافة منتج -->
<form class="form-horizontal" data-bind="submit:$root.create">
  <fieldset>
   <legend>إضافة منتج</legend>
   <div class="control-group">
   <label class="control-label" for="input01">اسم المنتج</label>
   <div class="controls">
    <input type="text" name="Name" class="input-xlarge">
   </div>
   </div>
   <div class="control-group">
   <label class="control-label" for="input01">السعر الأصلي</label>
   <div class="controls">
    <input type="text" name="Price" class="input-xlarge">
   </div>
   </div>
   <div class="control-group">
   <label class="control-label" for="input01">سعر الترويج</label>
   <div class="controls">
    <input type="text" name="ActualCost" class="input-xlarge">
   </div>
   </div> 
   <div class="form-actions">
   <button type="submit" class="btn btn-primary">حفظ</button>
   <button class="btn">إلغاء</button>
   </div>
  </fieldset>
</form>
</body>

js代码　

<script type="text/javascript">
function ProductsViewModel() { 
 var baseUri = 'http://localhost:8080/knockout/'; 
 var self = this; 
 //self.products = ko.observableArray([{'Id':'111','Name':'联想K900','Price':'3299','ActualCost':'3000'},{'Id':'222','Name':'HTC one','Price':'4850','ActualCost':'4500'}]); 
  self.products = ko.observableArray();
 $.getJSON(baseUri + "list", self.products);//加载产品列表
 //添加产品
 self.create = function (formElement) {    
  $.post(baseUri + "add", $(formElement).serialize(), function(data) {
    if(data.success){//服务器端添加成功时，同步更新UI
    var newProduct = {};
    newProduct.Id = data.ID;
    newProduct.Name = formElement.Name.value;
    newProduct.Price = formElement.Price.value; 
    newProduct.ActualCost = formElement.ActualCost.value; 
    self.products.push(newProduct);}
    }
  },"json"); 
 } 
 //تعديل المنتج
 self.update = function (product) {
  $.post(baseUri + "update", product, function(data) {
    if(data.success){
     alert("تم التعديل بنجاح");
    }
  },"json"); 
 } 
 //حذف المنتج
 self.remove = function (product) { 
  $.post(baseUri + "delete", "productID="+product.Id, function(data) {
    if(data.success){
    //إذا تم حذف النموذج بنجاح على الجانب الخادم، يتم حذفه أيضًا في UI
    self.products.remove(product);
    }
  },"json"); 
 } 
}
ko.applyBindings(new ProductsViewModel());
</script>

إذا أردتم التعمق أكثر في التعلم، يمكنكم الضغط هنا للتعلم، وسنقدم لكم أيضًا 3 مواضيع رائعة:

تعليمات تعلم Bootstrap

تعليمات تطبيق Bootstrap

تعليمات استخدام إضافات Bootstrap

هذا هو نهاية محتويات هذا المقال، نأمل أن تكون قد ساعدتكم في التعلم، ونأمل أيضًا أن تدعموا تعليمات النطق.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات للمالك الأصلي، تم جمع المحتويات من قبل المستخدمين على الإنترنت وتم تحميلها بشكل تلقائي، لا يمتلك هذا الموقع حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي ولا يتحمل الموقع أي مسؤولية قانونية. إذا اكتشفتم محتوى يشتبه في انتهاك حقوق النسخ، يرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) للإبلاغ، وقدموا الأدلة ذات الصلة، إذا تم التحقق من ذلك، سيتم حذف المحتويات المشبوهة فورًا.

دليل الأساسيات

توصيات مخصصة لك